CODEWITHSUNDEEP
javascripthtml
CodeKage
CodeKage

Reputation: 1

How do i get my button to stop dissapearing after onclick events

I am creating a website that would generate random numbers and then output a string based on the random number generated (1-7). I have created the button but after i click it, it turns into the output and i can only use it again after refreshing the page. This is a HUGE problem for me. I also need a way to add multiple buttons that would each give their own different output. I guess you could say i have two problems

here is the code 

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>


<p id="demo"></p>

<script>
function Cmajor(){
    let getrandomnumber = function (start, range) {

        let getrandom = Math.floor((Math.random() * range) + start);
        while (getrandom > range){

            getrandom = Math.floor ((Math.random() * range) + start);
        }
        return getrandom;
    }
    var work = (getrandomnumber (1, 7));
    if (work == 1) {
        document.write("Cmajor");
    } else if (work == 2) {
        document.write("Dminor");
    } else if (work == 3) {
        document.write("Eminor");
    } else if (work == 4) {
        document.write("Fmajor");
    } else if (work == 5) {
        document.write("Gmajor");
    } else if (work == 6) {
        document.write("Aminor");
    } else {
       document.write("Bdiminished");
    }


    }

</script>
<button onclick="Cmajor()">Click me</button>
<script>
    event.preventDefault();
</script>



    </body> 



</html>

I WILL BE SO GRATEFUL IF ANYONE HELPS!!

or even tries

thanks again

Upvotes: 0

Views: 60

Answers (4)

CurlyError
CurlyError

Reputation: 460

The button is disappeared because you are using document.write(); in order to display the output. HTML DOM write() Method is used after the document is fully loaded, and it will delete all existing HTML.

Instead of it, you can set the innerHtml of a specific element. So it would be something like this:

document.getElementById("displayChord").innerHTML="Cmajor";

while you have to add <p id="displayChord"></p> to your HTML Code.

About your second problem, you can add multiple buttons calling the same function onclick, but if you use innerHtml, they'll replace each others result. So, you have to create different <p> elements.

This would be my solution:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <button onclick="Cmajor('chord1')">Click me</button>
        <button onclick="Cmajor('chord2')">Click me</button>
        <button onclick="Cmajor('chord3')">Click me</button>

        <p id="chord1"></p>
        <p id="chord2"></p>
        <p id="chord3"></p>

        <script>
            function Cmajor(display_id) {
                let getrandomnumber = function(start, range) {

                    let getrandom = Math.floor((Math.random() * range) + start);
                    while (getrandom > range){

                        getrandom = Math.floor ((Math.random() * range) + start);
                    }
                    return getrandom;

                }

                var work = (getrandomnumber (1, 7));
                if (work == 1) {
                    document.getElementById(display_id).innerHTML=("Cmajor");
                } else if (work == 2) {
                    document.getElementById(display_id).innerHTML=("Dminor");
                } else if (work == 3) {
                    document.getElementById(display_id).innerHTML=("Eminor");
                } else if (work == 4) {
                    document.getElementById(display_id).innerHTML=("Fmajor");
                } else if (work == 5) {
                    document.getElementById(display_id).innerHTML=("Gmajor");
                } else if (work == 6) {
                    document.getElementById(display_id).innerHTML=("Aminor");
                } else {
                    document.getElementById(display_id).innerHTML=("Bdiminished");
                }
            }
        </script>
    </body> 
</html>

NOTE: If you use an array to declare all chords, and then use the number you randomly generate as the index of the array, it would be much better than using a lot of if-statements.

Upvotes: 0

EmAnt
EmAnt

Reputation: 36

try document.getElementById("demo").innerHTML = "your chord"; instead of document.write("..."); document.write deletes all the existing HTML and replaces it with the argument of the function.

moreover you can remove <script> event.preventDefault(); </script>

event in this case is undefined and it will throw an error. the event is an argument of your click handler.

Upvotes: 0

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

u can use innerHTML method and u can delete a lot if contidion and with one array u can solve it

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
<script>
function Cmajor(){
    let getrandomnumber = function (start, range) {

        let getrandom = Math.floor((Math.random() * range) + start);
        while (getrandom > range){

            getrandom = Math.floor ((Math.random() * range) + start);
        }
        return getrandom;
    }
    var array=["Cmajor","Dminor","Eminor","Fmajor","Gmajor","Aminor","Bdiminished"]
    var work = (getrandomnumber (1, 7));
    document.getElementById("demo").innerHTML = '</br>'
    +array[work-1];
    }    
</script>
<button onclick="Cmajor()">Click me</button>
<p id="demo"></p>

    </body>

Upvotes: 1

Patebry
Patebry

Reputation: 1

Appending an element or string to the body with document.body.append(element) will add your new element without removing your button.

Upvotes: 0

Related Questions