我正在设计一个使用 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。 我想知道是否有更简单/更好的方法来做到这一点。 任何帮助将不胜感激。
最佳答案
使用类而不是 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
关于javascript - 使用一个功能编辑多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32388833/