当尝试将“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中做到这一点。
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");
});
}
一种可能性是使用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?。