新手求助：点击图片实现两张图片切换的最简JavaScript代码

先指出你原代码的几个问题：

• 没必要每次点击都创建新的<img>元素，直接修改现有图片的src属性即可
• img.src =="images/pic2.jpg"是比较运算符，不是赋值操作，应该用=
• 只写了切换到第二张图的逻辑，缺少切回第一张图的分支
• 没有给图片绑定点击触发事件

下面是最简的完整实现代码，直接复制就能用：

HTML 部分 #

<!-- 给图片设置id，绑定点击事件到切换函数 -->
<img id="toggleImg" src="images/pic.jpg" onclick="changeImage()" alt="可切换的图片">

JavaScript 部分 #

function changeImage() {
  // 获取页面上的图片元素
  const img = document.getElementById('toggleImg');
  // 定义两张图片的路径
  const pic1 = "images/pic.jpg";
  const pic2 = "images/pic2.jpg";
  
  // 判断当前图片路径，切换到另一张
  if (img.src.endsWith(pic1)) {
    img.src = pic2;
  } else {
    img.src = pic1;
  }
}

代码说明 #

• 直接复用现有图片元素，避免多余DOM操作，更高效
• 用endsWith()判断路径，解决浏览器自动补全绝对路径导致判断失效的问题
• 逻辑简单清晰：点击一次切换到另一张图，循环往复
• 代码量少，新手易读易理解

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