CODEWITHSUNDEEP
javascripthtmldynamic
Glen Keybit
Glen Keybit

Reputation: 326

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

I'm having troubles targeting the correct div id with dynamically (javascript) created divs.

How it should function..

  1. Each time you press the add text button a new text input is created with an incrementing id
  2. When you type into this box the text appears in the results div
  3. The same will repeat each time you press the add text button.

So far all of the above functions as I would expect.

The problem.. When you add a second text then try to edit the first text the id is wrong so the first text does not update.

How can I make this function as expected so no matter how many texts you add you can edit a previous one and it updates the correct 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>

Upvotes: 0

Views: 45

Answers (1)

ruwe
ruwe

Reputation: 41

When you was getting the id to use, you was getting the number of the index. Like length. You was getting the last number. I changed a little and it worked, see below:

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>

Upvotes: 1

Related Questions