使用addEventListener/onclick调用图片切换函数无响应且无报错

嘿，我帮你找到问题所在啦，都是两个很容易疏忽的小错误，改完就能正常切换图片了：

错误1：属性拼写错误 #

你把图片的src属性拼写成了scr！代码里有两处都犯了这个错：

• var dog = document.getElementById('avatar').scr;
• document.getElementById('avatar').scr = "dog2.jpg";

浏览器根本不认识scr这个属性，所以判断逻辑和赋值操作都没起作用，必须改成正确的.src。

错误2：事件绑定语法错误 #

addEventListener是一个方法，不是属性，你多写了一个等号=，导致事件根本没绑定成功。正确的写法是去掉等号：

button.addEventListener('click', changeDog);

修正后的完整代码 #

<img id="avatar" src="dog1.jpg" alt="avatar"> 
<button id="button">change dog</button>

<script>
function changeDog() { 
  var dog = document.getElementById('avatar').src; 
  // 额外小建议：浏览器可能把相对路径转成绝对路径，用includes判断更稳妥
  if (dog.includes("dog1.jpg")) { 
    document.getElementById('avatar').src = "dog2.jpg"; 
  } else { 
    document.getElementById('avatar').src = "dog1.jpg"; 
  } 
} 
var button = document.getElementById('button'); 
button.addEventListener('click', changeDog);
</script>

另外补充个小细节：直接用==判断路径时，浏览器可能会把相对路径自动转成绝对路径（比如变成http://xxx/dog1.jpg），导致判断失效，换成includes("dog1.jpg")来检查文件名，兼容性会更好~

内容的提问来源于stack exchange，提问作者JLeno46