Question

当尝试将“ click”事件侦听器添加到单个元素时，它会起作用：

var blog1 = document.getElementById("b1");

blog1.addEventListener("click", function(){
window.location.href="blog1.html";
});

但是，当我尝试使用for循环将点击侦听器一次分配给多个元素时，就像这样：

var blog1 = document.getElementById("b1");
var blog2 = document.getElementById("b2");
var blog3 = document.getElementById("b3");

for(var i =1; i<4; i++){
var k= ("blog" + i );
 k.addEventListener("click", function(){
 window.location.href=(k+".html");
 });
 }

我收到错误：

TypeError: k.addEventListener is not a function

谁能告诉我我要去哪里错了？非常感谢。附言：试图在香草JS中做到这一点。

Answer 1

var k= ("blog" + i );将创建一个类似于blog1，blog2，blog3的字符串。它将不引用该元素。您可以直接循环使用document.getElementById()并使用let代替var

for(let i =1; i<4; i++){
 let blog = document.getElementById("b"+i);
   blog.addEventListener("click", function(){
     window.location.href=(i+".html");
   });
}

Answer 2

一种可能性是使用eval，它基本上在运行时将String评估为JavaScript代码。
参考：eval。

var blog1 = document.getElementById("b1");
var blog2 = document.getElementById("b2");
var blog3 = document.getElementById("b3");

for(var i =1; i<4; i++){
    var k= eval("blog" + i );
        k.addEventListener("click", function(){
        window.location.href=(k+".html");    
    });
}

请注意，最好不要滥用eval，因为它可能导致性能和代码注入问题。参考：When is JavaScript's eval() not evil?。

为什么添加带有for循环的事件列表器时为什么会出现TypeError？

2 个答案: