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

Question

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

Is popup.document.body always defined? Could be throwing an error there if it can't find one of those elements in the chain -- check for errors in the console — IrkenInvader, Apr 19 '16 at 17:08

score 2 · Accepted Answer · edited May 23 '17 at 12:24

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

Thank you!, This cleared it right up both in my head and in my crappy query builder.. thank you again! — Anthony Timpson, Apr 19 '16 at 17:31

score 0 · Answer 2 · answered Apr 19 '16 at 17:10

This is happening because of the way innerHTML works.

(get) .innerHTML -> "Enumerate all of the elements in this DOM into "HTML" format, and return it as a string"
(set) .innerHTML = -> "Destroy all elements in this DOM, and then create new ones using the HTML that has been provided."

You're destroying your button, and its event listener, during the set operation. You'll likely want to create your button using a more manual method, like document.createElement, and then append it using myElement.appendChild. These operations are pretty common, so I don't think it would make sense to give a full tutorial here - this could also be easier with a framework like JQuery, which has many methods for adding new DOM elements.

score 0 · Answer 3 · answered Apr 19 '16 at 17:11

0

Looks like you messed up the order of the

" and '

try:

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

answered Apr 19 '16 at 17:11

Joakim Ericsson

4,616
3
21
29

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

3 Answers3

Broken

Corrected

You could also...