Changing Image onclick with JavaScript

Question

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>

if(img.src="img/RoteAmpel.jpg") <---- assignment, not comparison. — epascarello
– epascarello, Commented Nov 29, 2021 at 16:31
so i gotta do == ? when i write if(img.src=="img/RoteAmpel.jpg") it doesnt even change it once — user17543498
– user17543498, Commented Nov 29, 2021 at 16:32
And most developers tend to use === instead, to avoid unexpected behavior when comparing values of different types — Ruan Mendes
– Ruan Mendes, Commented Nov 29, 2021 at 16:34
console.log(img.src, img.src == "img/RoteAmpel.jpg") is it what you expect? — epascarello
– epascarello, Commented Nov 29, 2021 at 16:34

insertusernamehere · Accepted Answer · 2021-11-29 16:37:42Z

2

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">

answered Nov 29, 2021 at 16:37

insertusernamehere

23.7k10 gold badges93 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user17543498 Over a year ago

Yes thanks for the help you didnt only help me to fix it i also understood what was wrong because of the function test you gave me thank you :)

Collectives™ on Stack Overflow

Changing Image onclick with JavaScript

1 Answer 1

1. Assignment vs Comparison

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

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. Assignment vs Comparison

2. img.src might not be what you expect

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

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