Tengo problemas para apuntar a la identificación de div correcta con divs creados dinámicamente (javascript).
Como debe funcionar..
Hasta ahora, todas las funciones anteriores como cabría esperar.
El problema. Cuando agrega un segundo texto, intente editar el primer texto, la identificación es incorrecta, por lo que el primer texto no se actualiza.
¿Cómo puedo hacer que esta función sea la esperada para que, sin importar cuántos textos agregue, pueda editar uno anterior y actualice la identificación correcta?
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>Cuando estaba obteniendo la identificación para usar, estaba obteniendo el número del índice. Como longitud. Estabas recibiendo el último número. Cambié un poco y funcionó, mira a continuación:
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>