所以我现在正忙于学习JavaScript。我创建了一些动态按钮,我尝试添加一个addEvenListener。但它不起作用,我无法弄清楚它为什么不起作用。我只测试了一些东西,并尝试使用localstorage中的值创建按钮。它几乎正常工作,只有addEvenListener不起作用。我只想用localstorage中的密钥进行简单警报。
for (var i = 0; i <= localStorage.length-1; i++) {
var categoryButton = document.createElement('input');
categoryButton.setAttribute('class', 'forumMenu');
categoryButton.setAttribute('type', 'button');
categoryButton.setAttribute('name', localStorage.key(i));
categoryButton.setAttribute('value', localStorage.key(i));
categoryButton.setAttribute('id', localStorage.key(i));
categoryButton.addEventListener('click', function(col){
alert(col);
}(localStorage.key(i)),true);
forumMenu.appendChild(categoryButton);
}
有谁知道它为什么不起作用?
答案 0 :(得分:1)
您未将功能传递给EventTarget.addEventListener()
。您立即执行并传递此结果:
function (col) {
console.log(col);
}(localStorage.key(i))
......这是undefined
。您可以通过使用以下语法来修改:
categoryButton.addEventListener('click', (function(col) {
// return a function to addEventListener
return function(){
console.log(col);
}
})(localStorage.key(i)),true);
这是一个演示:
var input;
for (var i = 0; i <= 5; i++) {
input = document.createElement('input');
input.type = "button"
input.value = i;
input.addEventListener('click', function(i) {
// return a function to addEventListener
return function() {
console.log(i);
}
}(i), true);
document.body.appendChild(input);
}
&#13;
答案 1 :(得分:0)
您已将值存储在id
属性中,因此只需使用它:
for (var i = 0; i <= localStorage.length-1; i++) {
var categoryButton = document.createElement('input');
categoryButton.setAttribute('class', 'forumMenu');
categoryButton.setAttribute('type', 'button');
categoryButton.setAttribute('name', localStorage.key(i));
categoryButton.setAttribute('value', localStorage.key(i));
categoryButton.setAttribute('id', localStorage.key(i));
categoryButton.addEventListener('click', function () {alert(this.getAttribute('id'));});
document.body.appendChild(categoryButton);
}
在事件处理程序中,this
引用<input>
元素本身,因此您只需检索属性值。
答案 2 :(得分:-2)
那是因为你将eventlistener分配给一个不在DOM中的对象(那是因为你在加载DOM之后创建了这个元素)
试试这个:
categoryButton.onclick = function(col){
alert(col);
}
您可以向var声明一个函数,然后将此函数重新设置为事件处理程序:
var myFunction = function(){
alert("I'm a function");
}
myElement.onclick = myFunction;