定位用JavaScript创建的HTML元素

问题描述

这是我自己的第一个项目，当我尝试定位使用JavaScript创建的一组按钮时遇到问题。仅当我按下创建的第一个按钮时，事件监听器才会触发。它不会注册任何其他按钮单击。我在这里想念什么？任何帮助将不胜感激。

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：

<div id="button-holder"></div>
<script src="script.js"></script>

解决方法

您没有定义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)
    }
}

其他说明，建议使用forEach代替for loop。

,

您可以简单地使用className而不是id属性。同样，对于您的onclick事件，您可以调用函数传递this来获取单击的letter。

此外，您可以使用querySelector方法将所有字符附加到按钮支架上。

演示：

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

<div id="button-holder"></div>