在做练习的时候想要给一个图片元素添加点击事件:点击后修改其src属性,更换图片,在语法没有问题的情况下,浏览器的debug显示“Uncaught TypeError: Cannot read property 'setAttribute' of undefined”这样的语句,代码如下:
function circleChange(){
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
var e=document.getElementById("bullets");
if(!document.getElementById("bullets")) return false;
var images=e.getElementsByTagName("img");
if(!e.getElementsByTagName("img")) return false;
for(var i=0;i<images.length;i++){
images[i].οnmοuseοver=function(){
images[i].setAttribute("src","img/circle-active.png");
}
images[i].οnmοuseοut=function(){
images[i].setAttribute("src","img/circle-normal.png");
}
}
}
addLoadEvent(circleChange);
之后我尝试很多种方法,最后发现只要把鼠标移入和移出事件语句中的images[i]更换成this之后,就可以解决该问题:
function circleChange(){
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
var e=document.getElementById("bullets");
if(!document.getElementById("bullets")) return false;
var images=e.getElementsByTagName("img");
if(!e.getElementsByTagName("img")) return false;
for(var i=0;i<images.length;i++){
images[i].οnmοuseοver=function(){
this.setAttribute("src","img/circle-active.png");
}
images[i].οnmοuseοut=function(){
this.setAttribute("src","img/circle-normal.png");
}
}
}
addLoadEvent(circleChange);
这是因为作用域问题导致的浏览器无法找到images[i]的setAttribute属性