Getting test from a dynamic button Javascript

Question

I'm looking for a method to get a text from a button, which was dynamically created. I've tried assigning an onclick when it's created, which only works for the last button.

My code:

for (var i = 0; i < 8; i++) {
  var divnode = document.createElement("div");
  document.getElementById("container").appendChild(divnode);

  var buttonnode = document.createElement("button");
  var textnode = document.createTextNode("Some Random Text" + i);
  buttonnode.appendChild(textnode);
  buttonnode.onclick = function() {
    console.log(buttonnode.innerHTML);
  }
  document.getElementById("container").childNodes[i + 1].appendChild(buttonnode);
}

Fiddle I've been working with: https://jsfiddle.net/tpwkzfor/

Answer 1

The reason this is happening is because you are defining the function every iteration of the loop. The way to fix this would be to pull the function definition outside of the loop, like this:

function printButton(event) {console.log(event.target.innerHTML)}

for (var i = 0; i < 8; i++) {
  var divnode = document.createElement("div");
  document.getElementById("container").appendChild(divnode);

  var buttonnode = document.createElement("button");
  var textnode = document.createTextNode("Some Random Text" + i);
  buttonnode.appendChild(textnode);
    buttonnode.onclick = printButton
  document.getElementById("container").childNodes[i + 1].appendChild(buttonnode);
}

Answer 2

Well the fix is pretty simple really.
Change your console.log(buttonnode.innerHTML) to console.log(this.innerHTML)

Answer 3

I found this to work for future reference.:

for (var i = 0; i < 8; i++) {
    var divnode = document.createElement("div");
  document.getElementById("container").appendChild(divnode);

  var buttonnode = document.createElement("button");
  var textnode = document.createTextNode("Some Random Text" + i);
  buttonnode.appendChild(textnode);
  buttonnode.id = "btnSearch" + i;
    buttonnode.addEventListener("click", function(e) {
    if(e.target && e.target.nodeName == "BUTTON") {
    console.log(document.getElementById(e.target.id).innerText);
    }});
  document.getElementById("container").childNodes[i + 1].appendChild(buttonnode);
}

Answer 4

Try to access the innerHTML as e.target.innerHTML

Refer below code

 for (var i = 0; i < 8; i++) { var divnode = document.createElement("div"); document.getElementById("container").appendChild(divnode); var buttonnode = document.createElement("button"); var textnode = document.createTextNode("Some Random Text" + i); buttonnode.appendChild(textnode); //pass event as argument buttonnode.onclick = function(e){ //console e.target.innerHTML console.log(e.target.innerHTML);} document.getElementById("container").childNodes[i + 1].appendChild(buttonnode); }

 <div> <label>Test</label> <div id="container"> </div> </div>