多次调用javascript值

Question

在我的标题中我有

    function addusr() {
        document.getElementById("usrout").innerHTML = document.getElementById("usrin").value;}

在我的文字中我有

code-bla bla bla<span id="usrout"></span> bla!! It works! 

但如果我尝试<span id="usrout"></span>在不同位置的同一页面上再次呼叫,则不会出现其他任何位置.

例:

    text <span id="usrout"></span> more text, code... another <span id="usrout"></span>...
...
..
...
another <span id="usrout"></span> ... 

只出现第一个,这是为什么？我该如何解决？

Answer 1

ID必须是唯一的.您可能希望考虑使用类.

当您为HTML元素分配类时,您的JavaScript代码可能如下所示:

function addusr () {
    var usrin = document.getElementById("usrin").value,
        usrout = document.getElementsByClassName("usrout");
    Array.prototype.forEach.call(usrout, function (el) {
        el.innerHTML = usrin;
    });
}

说明:

而不是getElementById,我们使用getElementsByClassName哪个返回具有该特定类名的元素数组.因此,需要一个循环来设置innerHTML每个检索元素的属性.