使用动态 (javascript) 创建 divs 以正确的 div id 为目标的问题

Question

我在使用动态 (javascript) 创建的 divs.

定位正确的 div id 时遇到问题

它应该如何运作..

每次您按下添加文本按钮时，都会创建一个带有递增 ID 的新文本输入
当您在此框中键入时，文本会出现在结果中 div
每次按下添加文本按钮时都会重复同样的操作。

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

问题.. 当您添加第二个文本然后尝试编辑第一个文本时，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>

使用动态 (javascript) 创建 divs 以正确的 div id 为目标的问题

Problems targeting the correct div id with dynamically (javascript) created divs

html

javascript

dynamic