Targeting HTML elements created in JavaScript

Question

Very first project on my own and I am having a problem when i am trying to target a set of buttons i am creating using JavaScript. The event listener will only fire when i hit the first button that is created. It wont register any other button clicks. What am i missing here? Any help would be appreciated.

JavaScript:

function creatButtons() {
    for ( var i = 65; i <= 90; i++ ) {
        let letter = String.fromCharCode( i );
        let button = document.createElement( "button" );
        button.id="buttons"
        button.innerHTML = letter;
        buttonHolder.appendChild(button)
    }
    
}
creatButtons()


// Event listeners
document.getElementById("buttons").addEventListener('click',function(){
     console.log("testing")
});

HTML:

user_1550617 · Answer

You didn't define buttonHolder.

function creatButtons() {
    var buttonHolder = document.getElementById('buttonHolder'); // add this line
    for ( var i = 65; i <= 90; i++ ) {
        let letter = String.fromCharCode( i );
        let button = document.createElement( "button" );
        button.id="buttons"
        button.innerHTML = letter;
        buttonHolder.appendChild(button)
    }
}

Additional note, suggest to use forEach instead of for loop.

user_13669048 · Answer

You cans simply use className instead of an id attribute. Also for your onclick event you can call a function pass this to get the letter you clicked.

Also, you querySelector method to append all your characters to the button holder.

Demo:

function creatButtons() {
  let buttonHolder = document.querySelector('#button-holder')
  for (var i = 65; i <= 90; i++) {
    let letter = String.fromCharCode(i);
    let button = document.createElement("button");
    button.className = "buttons"
    button.innerHTML = letter;
    button.onclick = function() {
       getLetter(this) //get letter
    };
    buttonHolder.appendChild(button)
  }

}
creatButtons()

//Get letters
function getLetter(e) {
 console.log(e.innerHTML)
}

Targeting HTML elements created in JavaScript

2 Answers