javascript - 使用一个功能编辑多个元素

Question

我正在设计一个使用 JavaScript 的 HTML 页面。我正在尝试获取页面的多个部分来显示用户选择的单位。我有一个输入字段，上面写着:

    Length Units: <input id="lengthunits" size="7" onblur="updateunits();"></input>

然后我在页面中有多个位置希望显示单位。例如，我可能有以下字段:

    Dimension 1 (<span id="dim1"></span>): <input id="dimension1"></input>

然后在 updateunits 函数中我有:

    function updateunits() {
    document.getElementById("dim1").innerHTML=document.getElementById("lengthunits").value;
    }

这工作正常，但我必须向该函数添加一行代码，并在页面中希望显示长度单位的任何位置使用单独的 id。我想知道是否有更简单/更好的方法来做到这一点。任何帮助将不胜感激。

Answer 1

使用类而不是 id:

<input id="lengthunits" size="7" onblur="updateunits();"></input>
<span class="dim"></span>
<span class="dim"></span>
<span class="dim"></span>

使用getElementsByClassname获取它们，循环它们并做你的事情:

function updateunits() {
    var list = document.getElementsByClassName("dim");
    for (var i = 0; i < list.length; i++) {
        list[i].innerHTML = document.getElementById("lengthunits").value;
    }
}

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName