Anthony Timpson Anthony Timpson - 7 months ago 30
HTML Question

Why does this JS button only add the div once? if i click again nothing happens

What i want it to do is add an additional div every time the add button is clicked. what happens instead is it adds it once and then never runs through the code again. I have tried printing out the count and it increments once and never populates again. If i delete the code about inserting the div the count increments every time the button is clicked. What am i missing here?

var count = 0;
button.onclick = function()
{
popup.document.body.innerHTML += '<div id="queryPart-'+ count+'"></div>';
count = count + 1;
};


here is the whole code block

var popup = open("", "Popup", "width=600,height=200,top=600,left=200");
//var div = popup.document.createElement("DIV");
//div.id = "div";
popup.document.body.innerHTML += '<div id="queryPart-0"></div>';
var div = popup.document.getElementById("queryPart-0");

queryLine(div);

var button = popup.document.createElement("BUTTON");
var t = popup.document.createTextNode("ADD");

button.id = "addbutton";
button.onclick = function()
{
popup.document.body.innerHTML += '<div id="queryPart-'+ count+'"></div>';
count= count + 1;
};
button.appendChild(t);
div.appendChild(button);

Answer

You should use Node.appendChild() instead because DOM manipulation is a better approach. You only want to add to the existing document, without obstructing or disturbing other elements. By appending directly to the HTML of the body, you are disassociating the original button with the click handler.

Googling this issue returns many helpful resources:

https://www.google.com/#q=innerhtml+removes+listener

After a bit on redirecting, I found one of the first questions related to this issue, here on Stack Overflow:

Is it possible to append to innerHTML without destroying descendants' onclick functions?


Broken

var button = document.getElementById('addBtn');
var count = 0;            

button.onclick = function() {
  console.log('click');
  document.body.innerHTML += '<div class="queryPart-'+ count+'">' + count + '</div>';
  count++;
};
<input type="button" id="addBtn" value="Press Me" />

Corrected

var button = document.getElementById('addBtn');
var count = 0;            

button.onclick = function() {
  var queryDiv = document.createElement('DIV');
  queryDiv.className = 'queryPart-' + count;
  queryDiv.innerHTML = count;
  
  document.body.appendChild(queryDiv);
  count++;
};
<input type="button" id="addBtn" value="Press Me" />

You could also...

set the outerHTML of a div, so that you don't have to create the Element as you see in the above example.

var button = document.getElementById('addBtn');
var count = 0;            

button.onclick = function() {
  var queryDiv = document.createElement('DIV');
  document.body.appendChild(queryDiv);
  queryDiv.outerHTML = '<div class="queryPart-'+ count+'">' + count + '</div>';
  count++;
};
<input type="button" id="addBtn" value="Press Me" />

Comments