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属性。

Answer 2

首先，在多个元素中使用相同的ID是WRONG和RFC。

您应该将其设为CLASS，而不是ID，然后是......

document.querySelector(".usrout").innerHTML = ...

Answer 3

每个元素都需要一个唯一的ID。

例如

<span id="usrout1"></span>
<span id="usrout2"></span>

或者，您可以使用已经提到的类

<span class="green"></span>
<span class="green"></span>

然后使用CSS选择器，例如document.getElementByClass

Answer 4

元素ID必须是唯一的，因此getElementById只会返回（最多）一个元素。

您需要使用其他搜索（可能是querySelectorAll）来获取所有适用的元素。然后，您可以遍历它们，并设置必要的注释。

例如：

function addusr() {
  var inputValue = document.getElementById("usrin").value;

  var outputs = document.querySelectorAll("span.usrout");
  for (var i = 0; i < outputs.length; ++i) {
    outputs[i].textContent = inputValue;
  }
}

<input id="usrin" type="text" />
<button type="button" onclick="addusr();">Update</button>

<span class="usrout"></span>
<span class="usrout"></span>
<span class="usrout"></span>
<span class="usrout"></span>
<span class="usrout"></span>
<span class="usrout"></span>

多次调用javascript值

4 个答案: