JavaScript，循环循环

我有个问题。。。如何让这两个文本字段分别显示输入的内容

<input type="text" id="userInput"></input> <button id="submitter">Submit</button>
<div id="output" style="white-space: pre-wrap; display: inline;"></div>

<input type="text" id="userInput"></input> <button id="submitter">Submit</button>
<div id="output" style="white-space: pre-wrap; display: inline;"></div>

<script type="text/javascript">
        var didClickIt = false;
        document.getElementById("submitter").addEventListener("click",function(){
            // same as onclick, keeps the JS and HTML separate
            didClickIt = true;
        });

        setInterval(function(){
            // this is the closest you get to an infinite loop in JavaScript
            if( didClickIt ) {
                didClickIt = false;
                // document.write causes silly problems, do this instead (or better yet, use a library like jQuery to do this stuff for you)
                var o=document.getElementById("output"),v=document.getElementById("userInput").value;
                if(o.textContent!==undefined){
                    o.textContent=v;
                }else{
                    o.innerText=v;
                }
             }
         },500);
</script>

提交
提交
var didClickIt=false；
document.getElementById（“提交者”）.addEventListener（“单击”，函数）（）{
//与onclick相同，将JS和HTML分开
didClickIt=true；
});
setInterval（函数（）{
//这是JavaScript中最接近无限循环的地方
如果（点击它）{
didClickIt=false；
//document.write会导致愚蠢的问题，请改为这样做（或者更好，使用jQuery之类的库为您完成这些工作）
var o=document.getElementById（“输出”），v=document.getElementById（“用户输入”）.value；
如果（o.textContent！==未定义）{
o、 textContent=v；
}否则{
o、 innerText=v；
}
}
},500);

---

我的问题是，当输入值时，其中一个框不起作用。如何修复此问题？

两个输入具有相同的id，您必须更改其中一个，然后将侦听器添加到另一个输入中

两个输入具有相同的id，您必须更改其中一个，并将侦听器添加到另一个

您应该为文本字段和按钮使用两个不同的id，并向其添加单击事件。

您应该为文本字段和按钮使用两个不同的id，并向其添加单击事件。

id

不能在页面上重复，您最终会得到一个无效的文档，并且该文档的行为与您期望的不一样

相反，为元素提供一个公共类，并使用

document.querySelectorAll

查找它们，然后将事件挂接在这两个元素上，请参见注释：

//获取所有按钮
var按钮=document.queryselectoral（“.submitter”）；
//通过设置处理程序来循环它们
Array.prototype.forEach.call(
按钮，
功能（按钮、索引）{
按钮。addEventListener（“单击”，函数（e）{
//打电话给我们的处理程序，告诉它点击了哪个按钮
返回handleClick（e，this，index）；
}，假）；
}
);
//点击
功能手柄点击（e、按钮、索引）{
//获取具有相同索引的userInput和output元素
var userInput=document.querySelectorAll（“.userInput”）[index]；
var output=document.querySelectorAll（“.output”）[index]；
if（用户输入和输出）{
//显示输出
output.innerHTML=“”；
output.appendChild(
document.createTextNode（userInput.value）
);
}
}

提交
提交

id

s不能在页面上重复，您将得到一个无效的文档，并且该文档的行为与您期望的不一样

相反，为元素提供一个公共类，并使用

document.querySelectorAll

查找它们，然后将事件挂接在这两个元素上，请参见注释：

//获取所有按钮
var按钮=document.queryselectoral（“.submitter”）；
//通过设置处理程序来循环它们
Array.prototype.forEach.call(
按钮，
功能（按钮、索引）{
按钮。addEventListener（“单击”，函数（e）{
//打电话给我们的处理程序，告诉它点击了哪个按钮
返回handleClick（e，this，index）；
}，假）；
}
);
//点击
功能手柄点击（e、按钮、索引）{
//获取具有相同索引的userInput和output元素
var userInput=document.querySelectorAll（“.userInput”）[index]；
var output=document.querySelectorAll（“.output”）[index]；
if（用户输入和输出）{
//显示输出
output.innerHTML=“”；
output.appendChild(
document.createTextNode（userInput.value）
);
}
}

提交
提交

总之，您“不能”有多个具有相同id的元素。除了更改输入和按钮的id外，您还需要更改输出div的id

总之，您“不能”有多个具有相同id的元素。除了更改输入和按钮的id外，您还需要更改输出div的id