JavaScript动态创建div时无法正确匹配对应id如何解决

问题原因 #

你代码的核心错误是updatetext函数直接使用全局变量textcount，这个变量每次点击「添加文本」按钮都会自增，始终等于最后一次创建的文本框序号。所以无论编辑哪个输入框，函数都会默认匹配最新的id，导致旧输入框的内容不能更新到对应结果区域。

修复方案 #

只需要在触发输入事件时，把当前文本框的序号传入updatetext函数即可，修改后的完整代码如下：

JavaScript代码 #

let textcount = 0;

function addtext() {
  textcount++
  
  // 创建带自增id的文本框
  var newtext = document.createElement("div");
  newtext.id = "text" + textcount;
  // 给updatetext传入当前的序号
  newtext.innerHTML = "text id = " + textcount + "<br><textarea placeholder=\"Start Typing\" id=\"textarea" + textcount + "\" class=\"textarea\" oninput=\"updatetext(" + textcount + ");\" autocomplete=\"off\" ></textarea>";
  document.getElementById("newtextboxappend").appendChild(newtext);
  
  // 创建对应id的结果展示div
  var shownewtext = document.createElement("div");
  shownewtext.id = "showtext" + textcount;
  document.getElementById("resultsappend").appendChild(shownewtext);
  document.getElementById("showtext" + textcount).innerText = document.getElementById("textarea" + textcount).value; 

}

// 接收传入的序号参数
function updatetext(count) {
  document.getElementById("showtext" + count).innerText = count + ") " + document.getElementById("textarea" + count).value;
  // 打印当前匹配的id，可验证是否正确
  console.log(count);
};

CSS代码（无修改） #

.newtextboxescontain {
 width:100%;
 border: 1px black solid;
 }
 
 .resultscontain {
 width: 100%;
 border: 0.5px black solid;
 }
 
 textarea {
   width: 95%;
   height: 20px;
 }

HTML代码（无修改） #

<button onclick="addtext();">Add Text</button>
<br /><br />
Text Inputs: <br />
<div id="newtextboxescontain" class="newtextboxescontain">
<div id="newtextboxappend"></div>
</div>
<br />

Results: <br />
<div id="resultscontain" class="resultscontain">

<div id="resultsappend"></div>
</div>

修改后新增任意数量的文本框，编辑任意历史输入框，都会匹配对应的id更新结果区域内容。

内容的提问来源于stack exchange，提问作者Glen Keybit