使用动态（javascript）创建的 div 定位正确 div id 的问题

Question

我在使用动态（javascript）创建的 div 来定位正确的 div id 时遇到问题。

它应该如何运作..

1. 每次按下添加文本按钮时，都会创建一个带有递增 id 的新文本输入
2. 当您在此框中键入时，文本会显示在结果 div 中
3. 每次按添加文本按钮时都会重复相同的操作。

到目前为止，上述所有功能都符合我的预期。

问题.. 当您添加第二个文本然后尝试编辑第一个文本时，id 错误，因此第一个文本不会更新。

如何按预期实现此功能，以便无论您添加多少文本，您都可以编辑以前的文本并更新正确的 id？

let textcount = 0;

function addtext() {
  textcount++
  
  //create textarea with incrimenting id
  var newtext = document.createElement("div");
  newtext.id = "text" + (textcount);
  newtext.innerHTML = "text id = " + (textcount) + "<br><textarea placeholder=\"Start Typing\" id=\"textarea" + textcount + "\" class=\"textarea\" oninput=\"updatetext();\" autocomplete=\"off\" ></textarea>";
  document.getElementById("newtextboxappend").appendChild(newtext);
  
  
//create results div with matching id
 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() {
  document.getElementById("showtext" + (textcount)).innerText = (textcount) + ") " + document.getElementById("textarea" + (textcount)).value;
    //console log id when typing to see what id is being targeted
  console.log(textcount);
};

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

<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>

Answer 1

当您获取要使用的 id 时，您正在获取索引的编号。比如长度。你得到的是最后一个号码。我做了一点改动，它起作用了，见下文：

let textcount = 0;

function addtext() {
  textcount++
  
  //create textarea with incrimenting id
  var newtext = document.createElement("div");
  newtext.id = "text" + (textcount);
  newtext.innerHTML = "text id = " + (textcount) + "<br><textarea placeholder=\"Start Typing\" id=\"textarea" + textcount + "\" class=\"textarea\" oninput=\"updatetext(event);\" autocomplete=\"off\" ></textarea>";
  document.getElementById("newtextboxappend").appendChild(newtext);
  
  
//create results div with matching id
 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(e) {
  var ideditaded = e.target.getAttribute("id").replace("textarea", ""); // get the id of what you are editing and remove the textarea to get only its textcount.
  document.getElementById("showtext" + (ideditaded)).innerText = (ideditaded) + ") " + document.getElementById("textarea" + (ideditaded)).value;
    //console log id when typing to see what id is being targeted
  //console.log(ideditaded);
};

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

<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>