Javascript "If" statement changes html image source

Question

I'm making a little point-and-click HTML game, while learning myself to code.

When I was testing stuff, I ran into a problem. My javascript changes an image, which I did not expect it to do.

Somewhere in my code is this image.

<img src="icon.jpg" id="img2">

And somewhere else is this script.

 <script >
 if (document.getElementById('img2').src="images.jpg") {
 window.alert("hi");
 }
 else { window.alert("bye");}
    </script>

So, if the image source of img2 is images.jpg, you'll get an alert saying "hi", and if it's not images.jpg, you;ll get an alert saying "bye". Obviously, the source of that image is icon.jpg, which is not images.jpg, so I expected it to say "bye". But it doesn't do that. When refreshing or loading the page, the source of img2 is immediately changed to images.jpg and I get a "hi" alert. How can I prevent that from happening?

document.getElementById('img2').src == "images.jpg") -> you need to compare with double equal sign : )) — moonwave99
– moonwave99, Commented Jan 3, 2016 at 10:54

Billy · Accepted Answer · 2016-01-03 12:04:50Z

2

make the equals a double equals. if (document.getElementById('img2').src=="images.jpg") {

function changeImg(){
  document.getElementById('img2').src="http://placebear.com/200/300";
  window.setTimeout(checkImg,1000);

}
  
  function checkImg(){
  if (document.getElementById('img2').src=="http://placebear.com/300/200") {
 window.alert("hi");
 }
 else { window.alert("bye");}
  }
checkImg();

<img src="http://placebear.com/300/200" id="img2"/>
<button type="button" onclick="changeImg()">Click to change and run test</button>

edited Jan 3, 2016 at 12:04

answered Jan 3, 2016 at 10:54

Billy

2,4381 gold badge13 silver badges13 bronze badges

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

5 Comments

J_from_Holland Over a year ago

Thanks! :) Completely forgot about that. Also, that was a VERY quick response!

Billy Over a year ago

you're welcome. Don't think there's a single person on here that hasn't done exactly the same thing at some stage. Happy new year.

J_from_Holland Over a year ago

Another question because of this one. I've now this code <img src="images.jpg" id="img2"> and this code <area href="javascript:replaceImage('img2', 'icon.jpg', 'l2')" shape="rect" coords="100,350,150,400">. Which means, originally there's an image with source images.jpg (alerting "hi"), which is changed by clicking to icon.jpg. After that change it won't alert me "bye". How can I make it alert "bye"?

Billy Over a year ago

can't see a change in the context of the question, should work, I'll do a code snippet to show it working. back in a mo.

J_from_Holland Over a year ago

Thank you very much. As I'm a new user I cannot upvote yet, but I would upvote your answer if I could :)

Felix Jr · Accepted Answer · 2016-01-03 11:17:05Z

1

Change your script as below:

if ( document.getElementById('img2').getAttribute('src') == "images.jpg" ) {
 	window.alert("hi");
  
}
else { 
	window.alert("bye");
}

<img src="icon.jpg" id="img2">

answered Jan 3, 2016 at 11:17

Felix Jr

4606 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript "If" statement changes html image source

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related