点击按钮切换图片功能异常：点击后图片空白问题求助

嘿，作为JavaScript新手遇到这种卡壳的情况太正常了！我来帮你梳理下最可能导致这个问题的几个原因，再给你一个可以参考的正确示例～

常见问题排查点 #

• 事件绑定拼写错误：你代码里的oncli...看起来是*onclick*的拼写失误？这个小错误会导致点击事件完全无法触发，但你说点击后图片变空白，那大概率是事件触发了，但后续操作有问题。
• 图片路径错误：切换图片时使用的路径不正确，比如相对路径写错、图片文件名拼写错误，或者图片根本不在指定位置。浏览器加载不到图片就会显示空白，你可以检查下图片路径是否和HTML文件的位置匹配，比如同目录下直接写文件名即可。
• DOM元素获取失败：你是否给图片设置了正确的*id*？如果JS里用document.getElementById('xxx')获取元素，但图片标签的id不是xxx，就会返回null，此时设置src自然会出问题。
• 函数名不匹配：比如按钮的*onclick*里写的是changeImg()，但你定义的函数是switchImg()，这种不匹配也会导致执行出错。

正确示例代码 #

这里给你一个可以直接参考的完整实现，你可以对比自己的代码找差异：

<!DOCTYPE html>
<html>
<body>
  <!-- 给图片设置明确的id，方便JS获取 -->
  <img id="myImg" src="original.jpg" alt="初始图片" width="200">
  <br>
  <!-- 绑定正确的点击事件函数 -->
  <button onclick="switchImage()">切换图片</button>
  <button onclick="restoreImage()">恢复原图</button>

  <script>
    // 提前保存原图的路径，避免恢复时重复查找
    const originalImageSrc = document.getElementById('myImg').src;

    function switchImage() {
      const imgElement = document.getElementById('myImg');
      // 替换成你要切换的图片路径
      imgElement.src = 'new-image.jpg';
      // 更新alt属性，提升可访问性
      imgElement.alt = "切换后的图片";
    }

    function restoreImage() {
      const imgElement = document.getElementById('myImg');
      imgElement.src = originalImageSrc;
      imgElement.alt = "初始图片";
    }
  </script>
</body>
</html>

调试小技巧 #

遇到这种问题时，打开浏览器的开发者工具（按F12），切换到Console标签页，看看有没有报错信息：

• 如果显示Cannot set property 'src' of null：说明你没有正确获取到图片元素，检查id是否匹配。
• 如果显示Failed to load resource：说明图片路径错误，检查图片的位置和文件名。

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