使用 JavaScript 更改图像 onclick

Question

嘿，我想在使用 javascript 单击 img 时更改图像，如果我单击图片，它会工作一次，它会更改 scr，但不会将其更改回来

function ImgClick() {
  var img = document.getElementById("b1")
  if (img.src = "img/RoteAmpel.jpg") {
    img.src = "img/GrueneAmpel.jpg";
  } else {
    img.src = "img/RoteAmpel.jpg";
  }


}

<!DOCTYPE html>
<html>

<head>
  <title>Mouse Events</title>
  <meta charset="UTF-8">

</head>

<body>
  <h3>Mouse Events</h3>
  <img src="img/RoteAmpel.jpg" alt="Bildwechsel" title="Bildwechsel" id="b1" onclick="ImgClick()" />


</body>

</html>

Answer 1

您的代码有两个问题：

1。分配与比较

您正在分配 src 而不是进行比较：

if (img.src="img/RoteAmpel.jpg") { }

应该是

if (img.src === "img/RoteAmpel.jpg") { }

2。 `img.src` 可能不是您所期望的

访问 img.src 时，您将获得完整的 URL 包括协议、域等

要比较实际属性的值，请使用：

img.getAttribute('src')

你可以自己测试一下：

function test() {
  var img = document.getElementById("b1")
      
  console.log(img.src);
  console.log(img.getAttribute('src'));
 }
    
test();

<img id="b1" src="img/RoteAmpel.jpg">

使用 JavaScript 更改图像 onclick

Changing Image onclick with JavaScript

javascript

image

onclick

src

1。分配与比较

2。 `img.src` 可能不是您所期望的

使用 JavaScript 更改图像 onclick

Changing Image onclick with JavaScript

javascript

image

onclick

src

1。分配与比较

2。 img.src 可能不是您所期望的

2。 `img.src` 可能不是您所期望的