使用JavaScript实现点击切换图片仅生效一次问题求助

你的代码存在两个核心问题导致无法来回切换：

• if判断语句中错误使用了赋值运算符=，而非比较运算符===，每次执行判断时都会直接把img.src赋值为img/RoteAmpel.jpg，判断结果永远为真，只会执行切换为绿灯图片的分支，无法触发else逻辑
• 直接读取img.src属性返回的是完整绝对路径，和你写的相对路径对比永远不相等，即便替换为比较运算符也可能出现判断失效的问题

修复方案（修改量最小） #

直接替换你的JS代码即可：

function ImgClick() {
  var img = document.getElementById("b1")
  // 用getAttribute获取html中写入的原始相对路径，用===做严格相等判断
  if (img.getAttribute("src") === "img/RoteAmpel.jpg") {
    img.src = "img/GrueneAmpel.jpg";
  } else {
    img.src = "img/RoteAmpel.jpg";
  }
}

更稳定的可选方案 #

用自定义数据属性存储状态，不受路径变化影响：

function ImgClick() {
  var img = document.getElementById("b1")
  if (img.dataset.state !== 'green') {
    img.src = "img/GrueneAmpel.jpg";
    img.dataset.state = 'green';
  } else {
    img.src = "img/RoteAmpel.jpg";
    img.dataset.state = 'red';
  }
}

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