在做练习的时候想要给一个图片元素添加点击事件:点击后修改其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].onmouseover=function(){ images[i].setAttribute("src","img/circle-active.png"); } images[i].onmouseout=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].onmouseover=function(){ this.setAttribute("src","img/circle-active.png"); } images[i].onmouseout=function(){ this.setAttribute("src","img/circle-normal.png"); } } } addLoadEvent(circleChange);
这是因为作用域问题导致的浏览器无法找到images[i]的setAttribute属性