getElementById和innerText只改变其中之一，而不是全部

Question

我上下找了好几天了，没有成功。请帮忙。该项目仅在 IE7 中使用，它有一个文本框，您可以在其中输入名称，然后 onclick 应该将该名称填充到所有范围中。这就是我所在的位置，但它只改变了第一个跨度。

请帮忙。谢谢。

<form>
<input id="i" value="My_Name">

<input type="button" value="Enter" 

onClick="document.getElementById('initials').innerText= i.value;">
</form>


<span id="initials">name</span>
<br />
<span id="initials">name</span>
<br />
<span id="initials">name</span>
<br />
<span id="initials">name</span>

Answer 1

元素的 id 在文档中应该是唯一的。您不能对多个元素使用相同的id。一些选项：

• 为元素提供不同的 ID，并使用多次调用 getElementById 独立检索它们
• 使用 getElementsByTagName 按标签名称检索元素并循环结果。 （考虑将常见的 span 元素包装在 div 中，并按相对于该包装器的标签名称进行选择。）
• 为元素指定一个公共类名称并使用 的某些实现getElementsByClassName 检索结果
• 为元素的 name 属性指定一个通用值（不需要是唯一的）并使用 getElementsByName。

Answer 2

规则是，如果您对所有 span 元素使用相同的 initials id，则 id 应该不同。你可以给它们不同的 id 并尝试像这样：

document.getElementById('initials1').innerText= i.value;
document.getElementById('initials2').innerText= i.value;
document.getElementById('initials3').innerText= i.value;
document.getElementById('initials4').innerText= i.value;

---

所以你可以像这样修改你的 html：

<span id="initials1">name</span>
<br />
<span id="initials2">name</span>
<br />
<span id="initials3">name</span>
<br />
<span id="initials4">name</span>

和

<form>
  <input id="i" value="My_Name">
  <input type="button" value="Enter" onClick="doIt();">
</form>

JS：

function doIt(){
  document.getElementById('initials1').innerText= i.value;
  document.getElementById('initials2').innerText= i.value;
  document.getElementById('initials3').innerText= i.value;
  document.getElementById('initials4').innerText= i.value;
}

---

如果你不想使用 ids，你可以使用 getElementsByTagName 并像这样更改函数：

function doIt(){
  var spans = document.getElementsByTagName('span');
  for(var i = 0; i < spans.length; i++){
     spans[i].innerText = document.getElementById('i').value;
  }
}