0

需要一些帮助...我有点新手，在早期的问答中遇到了麻烦。本教程正是我的计算机实验室项目所需要的...... 原始问答帖子在这里 但是当我尝试在我的网页中多次使用它时，它只呈现来自一个输入框的文本，取消另一个。我已经更改了“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>
4

1 回答 1

1

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

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

<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 这样的库可能会有所帮助那。）

于 2013-09-28T19:45:05.827 回答