Question

JS发送当前时间（hh：mm），并使用.innerHTML更新HTML页面。

我想在同一页面的两个位置显示时间，所以我复制了HTML

    <div class="time"></div>
    <div class="time"></div>

现在使用[0]和[1]，我可以两次调用相同的类。

    document.getElementsByClassName("time")[0].innerHTML = hour+":"+minute+":"+second;
    document.getElementsByClassName("time")[1].innerHTML = hour+":"+minute+":"+second;

无论如何，我都可以通过单行呼叫两者。快速搜索但找不到解决方法。

Answer 1

您可以执行Array.from和forEach（ES6）

Array.from(document.getElementsByClassName("time")).forEach(function(item) {
   item.innerHTML = hour+":"+minute+":"+second;
});

如果您必须经常操作DOM，也许我建议您使用Jquery作为执行此类操作的简便方法

如果您想了解有关HTML收集循环的更多信息，this topic是必不可少的

Answer 2

使用querySelectorAll：

// Not your time format, but still used to visualize
const date = new Date();

document.querySelectorAll('.time').forEach(elem => elem.innerText = date);

<div class="time"></div>
<div class="time"></div>

使用getElementsByClassName：

// Again to visualize
const date = new Date();

Array.from(document.getElementsByClassName('time')).forEach(elem => elem.innerText = date);

<div class="time"></div>
<div class="time"></div>

这也有效（Spread syntax）：

const date = new Date();

[...document.getElementsByClassName('time')].forEach(elem => elem.innerText = date);

<div class="time"></div>
<div class="time"></div>

Answer 3

要获取索引，请作为第二个参数传递

document.querySelectorAll(".time").forEach((el,i)=>el.innerHTML="element " + i)//hour+":"+minute+":"+second;)

<div class="time"></div>
 <div class="time"></div>

JS-如何从一个JavaScript输出在两个不同的位置显示值？

3 个答案: