Changing Image onclick with JavaScript-CodePudding

Hey i want to change a image when the img is clicked with javascript it works once if i click the picture it changes the scr but doesnt change it back

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>

CodePudding user response：

There are two problems with your code:

1. Assignment vs Comparison

You're assigning the src instead of making a comparison:

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

should be

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

2. `img.src` might not be what you expect

When accessing img.src you'll get the full qualified URL including protocol, domain etc.

To compare the actually attribute's value use this:

img.getAttribute('src')

You can test it yourself:

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

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

1. Assignment vs Comparison

2. img.src might not be what you expect

2. `img.src` might not be what you expect