每次单击 javascript 时如何更改元素属性？

Question

我有两张图片，我尝试使用 if 和 else 语句更改每次单击 img 元素时显示的图片。 但是图像只会在第一次发生变化，第二次点击不会变回图像。

<div class="mode-change">
   <img id="modeImg" class="" src="media/light.png" alt="Mode">
</div>

请注意，我不知道 jQuery。

我尝试在每次单击元素时使用 if 和 else 语句来更改图片，但代码不会运行通过 if 语句。

let modeImg = document.getElementById("modeImg");

modeImg.addEventListener("click", changePic);

function changePic() {
 if (modeImg.src === "media/light.png") {
   modeImg.src = "media/dark.png";
   console.log(modeImg.src);
 } else {
   modeImg.src = "media/light.png";
   console.log(modeImg.src)
 }
}

在尝试了@Emmanuel Villalobos 提供的答案并添加了正确的运算符之后，但我注意到即使 src 是“media/light.png”，控制台也只返回 else 语句的值。 所以我试着像这样在if语句之前返回图像src的output，

function changePic() {
 console.log(modeImg.src);
 if (modeImg.src === "media/light.png") {
   modeImg.src = "media/dark.png";
   console.log(modeImg.src);
 } else {
   modeImg.src = "media/light.png";
   console.log(modeImg.src)
 }
}

控制台返回了http://localhost/study/media/light.png中的绝对链接，而不是我在 HTML 代码中输入的media/light.png 。

Answer 1

您的条件中的问题是您使用了一个等号而不是两个或三个进行比较。

这个 function 应该可以如你所愿工作：

 function changePic() { if (modeImg.src.contains("media/light.png")) { modeImg.src = "media/dark.png"; console.log(modeImg.src); } else { modeImg.src = "media/light.png"; console.log(modeImg.src) } }