设置具有相同 ID 的元素的innerHTML

Question

在我的身体中，我有 3 个<a>具有相同 ID 和不同颜色（红色、绿色和蓝色）的 s 来识别它们。

<a id="hello" style="color: Red;">[Blank]</a>
<a id="hello" style="color: Green;">[Blank]</a>
<a id="hello" style="color: Blue;">[Blank]</a>

在我的脚本中，我有这个：

document.getElementById("hello").innerHTML = "Hello world!";

结果，只有第一个<a>（红色）会显示为“Hello world！” 小提琴。

我将脚本更改为：

for(var i = 0; i < 3; i++) {
    document.getElementById("hello").innerHTML = "Hello world!";
}

结果保持不变，只有第一个<a>（红色）显示为“Hello world！”。

假设我希望所有 3 都<a>显示为“Hello world！”。我怎么做？

Answer 1

这就是类的用途，ID 是唯一的。

将getElementById代码中的each 替换为getElementsByClassName，您就可以开始了。

HTML

<a class="hello" style="color: Red;">[Blank]</a>
<a class="hello" style="color: Green;">[Blank]</a>
<a class="hello" style="color: Blue;">[Blank]</a>

JS

var elems = document.getElementsByClassName("hello");
for(var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = "Hello world!";
}