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> 

Answer 1

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

Answer 2

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;
}