Question

我有一个难以解决的问题，比我想象的更难。我假设这个答案会有一个简单的答案。

所以，我使用javascript制作了一个计时器，计时器工作正常，这不是问题。但是，我使用它来定义计时器：

document.getElementById("timerz").innerHTML = 0;

然后使用它来显示计时器

<span id=timerz></span>

我知道我不能在多个地方使用具有相同ID的元素。但是，我试过这个：

document.getElementsByClass("timerz").innerHTML = 0;

然后

<span class=timerz></span>

它仍然不起作用，我该如何解决？这很奇怪。

Answer 1

使用带有s

的getElementsByClass

 document.getElementsByClassName("timerz")[0].innerHTML = 0;

或

var timerz = document.getElementsByClassName("timerz");
var i;
for (i = 0; i < timerz.length; i++) {
    timerz[i].innerHTML = 0;
}

Answer 2

所以在这里你需要了解javascript的工作原理。

document.getElementsByClassName("timerz")

这将返回一个跨距数组，因为我们为每个跨度使用了相同的类。现在我们需要迭代每个元素，而不是将html放在其中。

我建议您浏览任何javascript教程

＆＃13;

var spans = document.getElementsByClassName("timerz")
for(span of spans){
	span.innerHTML = "0"
}

＆＃13;

<span class="timerz"> </span>
<span class="timerz"> </span>
<span class="timerz"> </span>
<span class="timerz"> </span>

＆＃13;

Answer 3

这是迭代NodeCollection的方法（每当你使用任何可能返回多个元素的查询方法时返回它，如document.querySelectorAll，document.getElementsByClassName，document.getElementsByTagName）：

var timerz = document.getElementsByClassName("timerz");

Array.prototype.forEach.call(timerz, function(timer, index) {
    timer.textContent = `This is the timer with the index ${index}.`
})

<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>

您必须在此处使用Array.prototype.forEach.call，因为document.getElementsByClassName返回的数据类型，尽管与Array非常相似，但不是实际的数组。在某些浏览器中，NodeCollection可能没有方法forEach()。

另一种选择是从NodeCollection创建一个实际的数组：

var timerz = Array.from(document.getElementsByClassName("timerz"));

timerz.forEach(function(timer, index) {
    timer.textContent = `This is the timer with the index ${index}.`
})

<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>

如何在多个地方使用元素ID

3 个答案: