David Callanan David Callanan - 4 months ago 12
HTML Question

NodeList get node by index acts like pointer and automatically updates

I have a function for adding buttons to a page.

var count = 0;

function createOnclickFunction(number)
{
return function()
{
alert("This is button number " + number);
}
}

function addButton(data)
{
var newbutton = "..." //creates string from data

var element = document.getElementById("mydiv");
var children = element.children;

element.innerHTML = newbutton + element.innerHTML;

var currentCount = count;
children[0].onclick = createOnclickFunction(currentCount)

count++;
}


It basically creates a button into the html based off some data.

Every time I add a button, I would like it to be added to the start of div
#mydiv
, and since newbutton is also not an
Element
, but a
String
, I have to modify the innerHtml to add it to the start of
#mydiv
.

Afterwards, I must get the element (to add an onclick), by getting the first child of
#mydiv
.

However, after adding a second button to my page, the first button onclick no longer works.

If I modify my code to only add one button, everything works fine.

It seems that by calling
element.children[0]
, and modifying the onclick, that it is not modifying the onclick of the first
child
of
element.children
.

Instead it is modifying
element.children[0]
, in a way that when a new first element is added to
#mydiv
, the
onclick
of the
element.children[0]
of the first button is now pointing to the new first element (like it is a pointer, kind of).

Therefore, it is now using the old button
onclick
on the new button, and then the new button
onclick
is replaced with a new
onclick
.

So now, only the top button (the latest added button), can we clicked.

How can I fix this, and prevent it from using the new first button?

I've also tried to use
element.firstChild
instead of
element.children[0]
, which hopefully wouldn't update, but in that case it still updated.

Thanks in advance everyone!

EDIT:

Here is a jsfiddle: ( as you can see the only button that works is
stackoverflow
)

https://jsfiddle.net/7c7gtL26/

Answer

It seems you misunderstood the problem. The problem is that you are overwriting innerHTML in order to insert contents.

Never use innerHTML to insert contents. It will remove all the internal data, like event listeners. This is what happens here.

If you want to prepend some HTML string, use insertAdjacentHTML:

var count = 0;
function createOnclickFunction(number) {
  return function() {
    alert("This is button number " + number);
  }
}
function addButton(data) {
  var newbutton = "<button>Click me</button>" //creates string from data
  var element = document.getElementById("mydiv");
  element.insertAdjacentHTML('afterbegin', newbutton);
  var children = element.children;
  children[0].onclick = createOnclickFunction(count)
  count++;
}
addButton();
addButton();
addButton();
<div id="mydiv"></div>

Comments