如何解决定位用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。