Can someone explain to me the rule in JavaScript that applies here?-CodePudding

So I was playing around with JavaScript, and I ran into a problem. I was trying to make two buttons change the written text above them, with the change being different depending on what was already written. There were only 4 potential options. So what I thought was to just use an if and else ifs to make it work. But it didn’t work. Then over the next couple of hours I went over it again and again and couldn’t make it work. Finally I came up with an idea that made it work but I don’t know why.

The above is very long so you if you’d rather skip it, just read this: Why does a) work and not b)?

First my HTML:

<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="stylesheets.css">
        <script rel="javascript" src="script.js"></script>
    </head>
    <body onl oad="boopFunction()">
    
        <h1 id="boop"></h1>
    
        <button onclick="ggFunction()">Leave
        </button>

        <button onclick="eeFunction()">Enter</button>



    </body>
</html>

Then what worked, a):



var Boop = document.getElementById("boop");



/* onl oad welcome */
function boopFunction() {
    document.getElementById("boop").innerHTML = Poob[4];
    Boop = Poob[4];
}
    
    
    
    

/* leave button */
function ggFunction() {

    if (Boop == Poob[0]) {
    document.getElementById("boop").innerHTML = Poob[1];
    Boop = Poob[1];
    }
    else if (Boop == Poob[2]) {
        
        document.getElementById("boop").innerHTML = Poob[1];
        Boop = Poob[1];
    }
    else if (Boop == Poob[1]) {
        
        document.getElementById("boop").innerHTML = Poob[3];
        Boop = Poob[3];
    }
    else if (Boop == Poob[4]) {
        
        document.getElementById("boop").innerHTML = Poob[1];
        Boop = Poob[1];
    }
}



                                            
/* enter button */
function eeFunction() {

    if (Boop == Poob[1]) {
    document.getElementById("boop").innerHTML = Poob[0];
    Boop = Poob[0];
    }
    else if (Boop == Poob[3]) {
        
    document.getElementById("boop").innerHTML = Poob[0];
    Boop = Poob[0];
    }
    else if (Boop == Poob[0]) {
    document.getElementById("boop").innerHTML = Poob[2];
    Boop = Poob[2];
    }
        else if (Boop == Poob[4]) {
        
        document.getElementById("boop").innerHTML = Poob[0];
        Boop = Poob[0];
    }
}

Lastly what did not work, b):


var Poob = ["Welcome!", "Goodbye!", "You're still here?", "You're still outside!", "Hello there!"];


var Boop = document.getElementById("boop");



/* onl oad welcome */
function boopFunction() {
    document.getElementById("boop").innerHTML = Poob[4];
}
    
    
    
    

/* leave button */
function ggFunction() {

    if (Boop == Poob[0]) {
    document.getElementById("boop").innerHTML = Poob[1];
    }
    else if (Boop == Poob[2]) {
        
        document.getElementById("boop").innerHTML = Poob[1];
    }
    else if (Boop == Poob[1]) {
        
        document.getElementById("boop").innerHTML = Poob[3];
    }
    else if (Boop == Poob[4]) {
        
        document.getElementById("boop").innerHTML = Poob[1];
    }
}



                                            
/* enter button */
function eeFunction() {

    if (Boop == Poob[1]) {
    document.getElementById("boop").innerHTML = Poob[0];
    }
    else if (Boop == Poob[3]) {
        
    document.getElementById("boop").innerHTML = Poob[0];
    }
    else if (Boop == Poob[0]) {
    document.getElementById("boop").innerHTML = Poob[2];
    }
        else if (Boop == Poob[4]) {
        
        document.getElementById("boop").innerHTML = Poob[0];
    }
}

Can anyone explain why b) didn’t work and a) did? Why I had to add Boop = Poob[]?

CodePudding user response：

Reason is easy. Because you have two function and each your function doesn't include else condition. For initialize your data is html element

document.getElementById("boop");

so u don't enter any of condition so nothing working. Here you should use

document.getElementById("boop").innerHTML;

As solution you will give initialize value like your working example or add else statement and inside it give expected value