[英]If statement in javascript not working as intended
This if statement is meant to change text to one of the colors with a button for each color. 该if语句用于将文本更改为一种颜色,每种颜色都有一个按钮。 However, every button only changes the text to red as is.
但是,每个按钮仅将文本更改为红色。 I'm not sure what i am doing incorrectly.
我不确定自己在做什么错。
Javascript: 使用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: 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>
You nee to pass the clicked button reference to the function and then check the id of the button in the if...else
condition 您需要将单击的按钮引用传递给函数,然后在
if...else
条件下检查按钮的ID。
<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";
}
}
If the color and the button id are the same then 如果颜色和按钮ID相同,则
function colorFunction(button) {
document.getElementById('test').style.color = button.id;
}
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. 返回页面中ID为“ red”的ANY元素,由于该元素确实存在,因此计算结果为true。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.