CODEWITHSUNDEEP
javascriptif-statementboolean
leon
leon

Reputation: 39

Javascript condition operators not functioning how I thought they would

I'm trying to make my button change state depending on a boolean. This looks like it would work and I thought it would but it just changes to white.

Any idea why? Please help.

function dropDown(){
    var isClicked = false;
    var button = document.getElementById("bigbutton");

    if(isClicked == false){
        button.style.backgroundColor = "red";
        isClicked = true;
    }

    if(isClicked == true){
        button.style.backgroundColor = "white";
        isClicked = false;
    }        
}

Upvotes: 0

Views: 41

Answers (4)

Scott Marcus
Scott Marcus

Reputation: 65863

You have two separate if statements. The second one always runs after the first one. So, when the first one is done, it has set isClicked to true, so then the second one runs and sees the true value and sets the color to white.

You need to combine the two statements into a "one or the other" operation with an else branch. Also, with booleans, you don't need to test explicitly for true or false in an if statement because if conditions are always evaluated for true.

function dropDown(){

  var isClicked = false;
  var button = document.getElementById("bigbutton");

  // This implicitly tests isClicked for true
  if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = true;
  } else { 
    // If the earlier condition failed, the else branch is automatically run
    button.style.backgroundColor = "red";
    isClicked = false;
  }
}

Having said this, your function sets isClicked to false right away, so you are always going to fall into the else branch. You should not set an initial value for that and instead declare the variable at a higher scope, like this:

// We'll declare these at a higher scope so we don't keep establishing them
// every time the function runs:
var isClicked = null;
var button = document.getElementById("bigbutton");

function dropDown(){
  // This implicitly tests isClicked for true
  if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = true;
  } else { 
    // If the earlier condition failed, the else branch is automatically run
    button.style.backgroundColor = "red";
    isClicked = false;
  }
}

Lastly, if I understand your scenario correctly, you may not actually need JavaScript at all for this:

button { background-color:white;}
button:active { background-color:red;}
<button>Click Me</button>

Upvotes: 0

user3378165
user3378165

Reputation: 6916

This code snippet doesn't really make sense, you should get the click value as an event, if you set it to false in your code you don't gain anything.

$( "#yourButtonID" ).click(function() {
     button.style.backgroundColor = "white";
});

And outside the function (on page load, in my example) set the color to red:

$( document ).ready(function() {
     button.style.backgroundColor = "red";
});

Upvotes: 0

Jim Deville
Jim Deville

Reputation: 10672

You need to use else or return. Right now, you are setting isClicked to false, getting the element, then running through the first if block. Then you set isClicked to true, and it will then run the second if block. What you probably want is:

if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = false;
} else {
    button.style.backgroundColor = "red";
    isClicked = true;
}

However, this probably also won't work because isClicked is local to this function so will always be false. What you should do instead is check for a property of the button, perhaps the backgroundColor, and use that as the conditional instead:

var bgColor = button.style.backgroundColor
if(bgColor === "red"){
    button.style.backgroundColor = "white";
} else {
    button.style.backgroundColor = "red";
}

Upvotes: 2

rasmeister
rasmeister

Reputation: 1996

Your javascript code will run from the top down. So you start with isClicked false so the first if is satisfied, setting the background red. In the if you set the isclicked true, so the next if statement is then satisfied, turning the background color white.

The end result is your background color is white.

You likely want to set the isclicked on a 'click' event of your button.

Upvotes: 0

Related Questions