为什么在使用for循环添加事件侦听器时会出现类型错误?

问题描述 投票:0回答:2

当尝试将“click”事件侦听器添加到单个元素时,它可以工作:

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

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

但是,当我尝试使用for循环一次将click侦听器分配给多个元素时,如下所示:

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

谁能告诉我哪里出错了?非常感谢。 P.s-试图在香草JS中做到这一点。

javascript
2个回答
4
投票

var k= ("blog" + i );将创建一个像blog1blog2blog3这样的字符串。它不会引用该元素。你可以直接在循环中使用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");
   });
}

0
投票

一种可能性是使用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?

© www.soinside.com 2019 - 2024. All rights reserved.