If statement in javascript not working as intended

Question

This if statement is meant to change text to one of the colors with a button for each color. However, every button only changes the text to red as is. I'm not sure what i am doing incorrectly.

Javascript:

function colorFunction() {

if (document.getElementById("red")) {
document.getElementById('test').style.color = "red";

}else if(document.getElementById("blue")) {
document.getElementById('test').style.color = "blue";

}else if (document.getElementById("black")) {
document.getElementById('test').style.color = "black";

}

}

Html:

<button id="red" style="background-color:red" type="button" onclick="colorFunction()"><font color="white">Red Text</font></button>


<button id="blue" style="background-color:blue" type="button" onclick="colorFunction()"><font color="white">Blue Text</font></button>

<button id="black" style="background-color:black" type="button" onclick="colorFunction()"><font color="white">Black Text</font></button>

document.getElementById("red") returns a dom element which is a truthy value so always the first if will be executed if the red element is present rest of the else...if will be ignored — Arun P Johny
– Arun P Johny, Commented Apr 21, 2015 at 3:08
I recommend using the developer tools on what ever browser you are using and step through the code. It will help you understand what is happening here. As @Arun P Johny said, you need to pass in the button being clicked. — Des Horsley
– Des Horsley, Commented Apr 21, 2015 at 3:12

Arun P Johny · Accepted Answer · 2015-04-21 03:10:11Z

You nee to pass the clicked button reference to the function and then check the id of the button in the if...else condition

<button id="red" style="background-color:red" type="button" onclick="colorFunction(this)"><font color="white">Red Text</font></button>
<button id="blue" style="background-color:blue" type="button" onclick="colorFunction(this)"><font color="white">Blue Text</font></button>
<button id="blue" style="background-color:black" type="button" onclick="colorFunction(this)"><font color="white">Black Text</font></button>

then

function colorFunction(button) {
    if (button.id == "red") {
        document.getElementById('test').style.color = "red";
    } else if (button.id == "blue") {
        document.getElementById('test').style.color = "blue";
    } else if (button.id == "blue") {
        document.getElementById('test').style.color = "black";
    }
}

Demo: Fiddle

If the color and the button id are the same then

function colorFunction(button) {
    document.getElementById('test').style.color = button.id;
}

Demo: Fiddle

rikitikitik · Accepted Answer · 2015-04-21 03:13:21Z

This line:

if (document.getElementById("red"))

returns ANY element which has an id "red" in your page, and will evaluate to true since the element does exist.

What you can do is to make a few changes to your function and function calls and make things a lot simpler:

<button id="red" style="background-color:red" type="button" onclick="colorFunction('red')"><font color="white">Red Text</font></button>
<button id="blue" style="background-color:blue" type="button" onclick="colorFunction('blue')"><font color="white">Blue Text</font></button>
<button id="black" style="background-color:black" type="button" onclick="colorFunction('black')"><font color="white">Black Text</font>

function colorFunction(colorChoice) {
    document.getElementById('test').style.color = colorChoice;
}

Collectives™ on Stack Overflow

If statement in javascript not working as intended

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related