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

规则是id应该与所有span元素使用相同initials 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;
}

如果您不想使用ID，可以使用getElementsByTagName并更改此功能：

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

getElementById和innerText只更改一个，而不是全部

2 个答案: