Question

需要一些帮助......我有点像新手，并且在早期的Q＆amp; A中遇到了麻烦。本教程正是我的计算机实验室项目所需要的...... Original Q&A post here 但是当我尝试在我的网页中多次使用它时，它只从一个输入框中渲染文本，取消另一个输入框。我已经更改了“ID”，因此它们是独一无二的，但它仍然不起作用。不确定我是否遗漏了什么。任何帮助将不胜感激...提前致谢。

第一次输入：

<input type="text" id="input" /> <input type="button" onclick="updateNow()" value="Update" /> <script type="text/javascript"> function updateNow(){ document.getElementById("output").innerHTML = document.getElementById("input").value; } </script> <div id="output"></div>

第二次输入：

<input type="text" id="input1" /> <input type="button" onclick="updateNow()" value="Update" /> <script type="text/javascript"> function updateNow(){ document.getElementById("output1").innerHTML = document.getElementById("input1").value; } </script> <div id="output1"></div>

Answer 1

您没有为每个<script>元素获取新范围（如果您这样做，那么您将无法从onXXXX属性访问它们或加载JS库）。因此，每个function updateNow 都会覆盖之前的任何内容。使用您正在采用的方法，每个函数都需要一个唯一的名称。

您可以采用更通用的方法，通过使用单个函数来识别单击了哪个按钮，并通过遍历DOM来查找相关的div（例如，通过查找与输入相同的div内的输出div）。 / p>

<div>
    <input class="user_input">
    <input type="button" value="Update">
    <div class="output"></div>
</div>
<div>
    <input class="user_input">
    <input type="button" value="Update">
    <div class="output"></div>
</div>
<script type="text/javascript"> 
function updateNow(evt){
    if (evt.target.type == "button") {
        var div = evt.target.parentNode;
        var input = div.querySelector('.user_input');
        var value = input.value;
        div.querySelector('.output').innerHTML = value;
    }
} 
addEventListener('click', updateNow);
</script>

（addEventListener和querySelector在非常老的IE中得不到很好的支持。如果你需要支持它，那么你将不得不使用其他方法来绑定事件监听器和走路DOM。像YUI或jQuery这样的库对此有帮助。）

在网页上动态更改文本

1 个答案: