JavaScript executing both the if statements

Question

I'm quite new to web development and programming . I have two buttons in my webpage. I was trying to change the colour of the buttons based on the text value in the "something" variable as you can see in the code. But when i run this code, both the if statements are executed and both the buttons ( Button 1 and Button 2) turns green instead of one. Any help is appreciated.

(NOTE: even " === " and "==" doesn't work for me ) and I have a script which changes the value for something. So when button 1 or button 2 is clicked , the variable "something "automatically updates with Lights turned On or Lights turned off in text format.

EDIT: Please check the full updated code

<script type="text/javascript">

var something="Lights Turned Off";
window.onload=ChangeColor();

function Lighton(){
    document.getElementById('button1').style.backgroundColor = 'green';
}


function Lightoff(){
    document.getElementById('button2').style.backgroundColor = 'green'; 
}

function ChangeColor()  { 
    var something="Lights Turned Off";

    if (something= "Lights Turned Off"){
        console.log("inside Off function");
        Lightoff();
    }
    
    if (something= "Lights Turned On"){
        console.log("inside On function");
        Lighton();
    }     

}

</script>

FULL CODE:


<!DOCTYPE html>
<html lang="en">
<head>



<?php

$myfile = "./newfile.txt";

$doc1 =file_get_contents($myfile);

echo $doc1;  // doc1 has the value inside newfile.txt 
             //  ( ie Lights Turned On OR Lights Turned off)
 
?>




<style>

.button {

  box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
  margin-top: 280px;
  margin-left: 420px; 
  background-color:rgb(128, 128, 128); 
  border: none;
  color: white;
  padding: 30px 35px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
}
  
</style>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-UA-Compatible" content="ie=edge">
  <title>Document ltd</title>
   
</head>




<body>

<div style = "position:fixed; left:-300px; top:-100px;">


    <form method="get" action="http://xxxxxx/ab/my.php" >
    <button class="button"  id="button1">Lights On</button>
    </form>

    <form method="get" action="http://xxxxxx/ab/my1.php" >
    <button class="button"  id="button2">Lights Off</button>
    </form>


</div>






<script type="text/javascript">


var something=<?php echo json_encode($doc1); ?>; //takes what's inside doc1.


function Lighton(){

document.getElementById('button1').style.backgroundColor = 'green';

}




function Lightoff(){

document.getElementById('button2').style.backgroundColor = 'green'; 

}




function ChangeColor()  { 

             

         if (something=="Lights Turned Off"){

         Lightoff();

         console.log("inside Off function");

         }


       if (something=="Lights Turned off"){

        
       Lighton();

       console.log("inside On function");


         }
        


}

window.onload=ChangeColor();




</script>
</body>
</html>

"=" <> "==" or "==="! Please read this: [Equality comparisons and sameness, mdn.com](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) — paulsm4, Nov 29 '20 at 23:27
Also, I notice that `something` is being defined again in the `ChangeColor()` function such that it'll always match the `Lightoff()` if statement. — Lemondoge, Nov 29 '20 at 23:37
Alright, so I tested it with the full code, and there are two issues: 1: you're using one equal sign instead of two, and 2: you're redefining the `something` variable inside the `ChangeColor()` function, so the declaration outside doesn't matter. The solution is to use two equals signs in both if statements, and to remove the extra `something` declaration inside `ChangeColor()`. — Lemondoge, Nov 30 '20 at 01:05
Hey did you see the full updated code i posted. I have made all those changes, But still it doesn't work. Thanks — jo8080, Nov 30 '20 at 01:12

Saar Davidson · Answer 1 · 2020-11-29T23:30:46.067

1

In order to check if a variable is equal to another expression you should use the triple equal or the double equal like so:

if (something === "Lights Turned Off") {

  console.log("inside Off function");

  Lightoff();

}


if (something === "Lights Turned On") {

  console.log("inside On function");

  Lighton();

}

otherwise, you'll just assign to the variable that value and check if that value is truthy or not. this is how I would have wrote the code if that's helpful:

var isLightOn = false;
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
window.onload = ChangeColor();


function lightOn() {
  isLightOn = true;
  button1.style.backgroundColor = 'green';
}

function lightOff() {
  isLightOn = false;
  button2.style.backgroundColor = 'green';
}

function ChangeColor() {
  if (!something) {
    console.log("inside Off function");
    lightOff();
  } else {
    console.log("inside On function");
    lightOn();
  }
}

edited Nov 29 '20 at 23:30

answered Nov 29 '20 at 23:22

Saar Davidson

1,312
1
7
16

Hey, i tried that as well. But when i do that the colours wont appear on the button – jo8080 Nov 29 '20 at 23:23
Hey even when i try that only the button "Lights on " is lighted up. Why you haven't defined what is "something" in that code? sorry if im wrong. In the real code i have a text file and my php gets the value what is inside that text file. The text file has the value "Lights turned on or Lights turned off" based on the button clicked. Then my javascruipt takes the value that the php gives and puts it inside something. var something=; , now "something" has Lights Turned on OR Lights Turned Off. – jo8080 Nov 29 '20 at 23:41
Can you share all the relevant code in your question please? – Saar Davidson Nov 30 '20 at 00:44
Hey i have updated the question and have posted the full code. Thanks a lot – jo8080 Nov 30 '20 at 00:52

DownloadPizza · Answer 2 · 2020-11-29T23:23:32.427

0

How about

if (something== "Lights Turned Off"){ 
console.log("inside Off function");
 Lightoff(); 
} else if (something== "Lights Turned On"){ 
console.log("inside On function");
 Lighton(); 
}

edited Nov 29 '20 at 23:23

answered Nov 29 '20 at 23:19

DownloadPizza

3,307
1
12
27

In this case, the first condition (Lights Turned Off) will always evaluate to true, because a single = sign (representing assignment) was accidentally used instead of the comparison == operator. – Lemondoge Nov 29 '20 at 23:22
1

Oh I didnt even see that, my bad – DownloadPizza Nov 29 '20 at 23:23
Hey, i tried this, only lightoff() will work and the colour just stays there. Even if i change the value of "something" to "Lights turned on " it will just trigger the Lights off(). SO basically when i press lights off, the other colour still has the colour. Thanks a lot – jo8080 Nov 29 '20 at 23:28

score 0 · Answer 3 · answered Nov 29 '20 at 23:20

0

When you are using an if statement, you don't use a single = sign. Instead, you use two or three equals signs (== or ===). One = represents assignments, while two or three represent comparison. You should replace your your if statement code with this:

if (something== "Lights Turned Off"){
         console.log("inside Off function");
         Lightoff();
} else if (something== "Lights Turned On"){
         console.log("inside On function");
         Lighton();
}

answered Nov 29 '20 at 23:20

Lemondoge

959
4
17

Hey i tried both of them, but then now the colour wont come on any buttons – jo8080 Nov 29 '20 at 23:24
That's odd. Is anything being logged in the console? – Lemondoge Nov 29 '20 at 23:27
Its not odd, you arent changing `something` – DownloadPizza Nov 29 '20 at 23:28
What do you mean? `something` is being defined in OP's code – Lemondoge Nov 29 '20 at 23:34
So when i put "=" colours come on both of the button , ie both the stament are running. If i put (==) or(===) no colour comes on the buttons, ie nothing is being executed – jo8080 Nov 29 '20 at 23:51
At least one thing is sure though: using one equals sign is incorrect, with 100% certainty. There must be another issue in your code somewhere else. And again, is anything being logged in the console? It's possible that the `Lightoff()` and `Lighton()` functions aren't working. – Lemondoge Nov 30 '20 at 00:24

JavaScript executing both the if statements

3 Answers3