javascript - 通过相同的 id 实时更新 javascript 中的文本

Question

如何更新 id="b"中的文本？

<script type="text/javascript">
function updateb()
{
var a= document.getElementById("a").value;
var b = document.getElementById("b").innerHTML = a * 10;
}
</script>

<input type="text" id="a" name="a" value="10" onKeyUp="updateb();" /><p id="b" name="b"></p>
<input type="text" id="a" name="a" value="20" onKeyUp="updateb();" /><p id="b" name="b"></p>
<input type="text" id="a" name="a" value="30" onKeyUp="updateb();" /><p id="b" name="b"></p>

Answer 1

1.) ID 在页面中应始终是唯一的。

2.) 如果存在多个具有相同值的 id，GetElementById 始终仅返回一个具有相同 id 的元素

3.) 对于上述问题，您可以尝试 getElementsByName。它与 getElementById 非常相似，但不同之处在于它会为您提供具有相同名称的所有元素。如果你这样做

x= document.getElementsByName("b");

x[0] 将包含第一个

x[1] 将包含第二个

x[2] 将包含第三个

如果您希望通过 getElementById 完成，请使用任何其他唯一名称更改您的元素 id，例如:

<script type="text/javascript">
function updateb(Src)
{
    var a= Src.value;
    document.getElementById("b" + Src.id.substr(1)).innerHTML = a * 10;
}
</script>

<input type="text" id="a1" name="a" value="10" onKeyUp="updateb(this);" /><p id="b1" name="b"></p>
<input type="text" id="a2" name="a" value="20" onKeyUp="updateb(this);" /><p id="b2" name="b"></p>
<input type="text" id="a3" name="a" value="30" onKeyUp="updateb(this);" /><p id="b3" name="b"></p>