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

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

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