javascript中的If语句未按预期工作

此if语句用于将文本更改为其中一种颜色，每种颜色都有一个按钮。但是，每个按钮只会按原样将文本更改为红色。我不确定我做错了什么

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:

红色文本
蓝色文本
黑文

您需要将单击的按钮引用传递给函数，然后在

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>

演示：

---

如果颜色和按钮id相同，则

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

---

演示：

您需要将单击的按钮引用传递给函数，然后在

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>

演示：

---

如果颜色和按钮id相同，则

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

演示：

这一行：

if (document.getElementById("red"))

返回页面中id为“红色”的任何元素，由于该元素确实存在，因此其计算结果将为true

您可以做的是对函数和函数调用进行一些更改，使事情变得更简单：

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

这一行：

if (document.getElementById("red"))

返回页面中id为“红色”的任何元素，由于该元素确实存在，因此其计算结果将为true

您可以做的是对函数和函数调用进行一些更改，使事情变得更简单：

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

---

document.getElementById（“红色”）

返回一个dom元素，该元素是真实值，因此如果

红色
元素存在，则始终会执行第一个
if
元素，否则，
的其余部分将被忽略…if
将忽略您真正想做的是什么？这里是id为testI的元素，建议在您使用的浏览器上使用开发人员工具，并执行步骤通过代码。它将帮助你了解这里发生的事情。正如@Arun P Johny所说，您需要传入正在单击的按钮。
document.getElementById（“红色”）
返回一个dom元素，该元素是真实值，因此如果
红色
元素存在，则始终会执行第一个
if
元素，否则，
的其余部分将被忽略…if
将忽略您真正想做的是什么？这里是id为testI的元素，建议在您使用的浏览器上使用开发人员工具，并执行步骤通过代码。它将帮助你了解这里发生的事情。正如@Arun P Johny所说，您需要传入被单击的按钮。