why JS function doing the wrong if statement?

Question

I have a function with 2 if statements inside it. There is a variable set it false, and when the function is called, it is supposed to check whether or not the variable is true or false and do a function based on that when the function is false, it tells the variable to become true, and vise versa with if the variable is false. But when I call the function then it will run the opposite if statement. (ie, if the variable is false, then it will do the things that it only should do if the variable is true) I don't understand why this happening. Hope someone can help! I will include a snippet below of the code.

What should happen:
when you click the button its self should turn this color #5aa897, set the variable to true, and the text should change to "On".

What is happening:
when you click the button it turns the button this color #687980, sets the variable to false, and sets the text to "Off". It should only do this if the variable is set to "true", but it is doing it when the text is set to false.

I have no idea why this is happening. I don't know if I set up my function wrong maybe, or my if statement, but I am stuck.

Hope someone can help.

var x = false;

function arOn() {
  if (x == false) {
    document.getElementById('onOff').innerHTML = "On";
    document.getElementById('ar').style.backgroundColor = "#5aa897";
    x = true;
  }
  if (x == true) {
    document.getElementById('onOff').innerHTML = "Off";
    document.getElementById('ar').style.backgroundColor = "#687980";
    x = false;
  }

}

<button id="ar" onclick="arOn()" class="ar">Auto-Run: <span id="onOff">Off</span></button>

but x IS set to true. You set it to true when x is false. So when it checks if it is true, it is! — Geoduck
– Geoduck, Commented Apr 29, 2021 at 20:25
You should add a return so it doesn´t check the true statement after. — Pauline
– Pauline, Commented Apr 29, 2021 at 20:26

Kinglish · Accepted Answer · 2021-04-29 20:29:20Z

2

Think about refactoring this so you can detect the true/false dynamically rather than hard coded:

function arOn() {
var elem1 = document.getElementById('onOff') ;
var elem2 = document.getElementById('ar') ;

elem1.innerHTML = elem1.innerHTML == "On" ? "Off" : "On" ;
elem2.style.backgroundColor = elem2.style.backgroundColor == "#5aa897" ? "#687980" : "#5aa897" ;

}

answered Apr 29, 2021 at 20:29

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AmiralBl3ndic · Accepted Answer · 2022-10-13 09:06:19Z

1

Here you are doing two if statements in a row. When the first one is false, then the second one is obviously true (because it is equivalent to an else statement). But in your case, since at the end of the first if block you set the variable to true, it makes the function enter the second if statement too. Hence the value of the x variable never really changes.

var x = false;

function arOn() {
  if (x === false) {
    document.getElementById('onOff').innerHTML = "On";
    document.getElementById('ar').style.backgroundColor = "#5aa897";
    x = true;
  } else {
    document.getElementById('onOff').innerHTML = "Off";
    document.getElementById('ar').style.backgroundColor = "#687980";
    x = false;
  }

}

<button id="ar" onclick="arOn()" class="ar">Auto-Run: <span id="onOff">Off</span></button>

edited Oct 13, 2022 at 9:06

answered Apr 29, 2021 at 20:28

AmiralBl3ndic

4145 silver badges15 bronze badges

1 Comment

AmiralBl3ndic Over a year ago

As pointed out by @John Tyner, you can actually refactor it to not even need a variable to track the state of the button.

Collectives™ on Stack Overflow

why JS function doing the wrong if statement?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related