Jump to content

How do i change an image with if/else statement?


Allerious
 Share

Recommended Posts

I've tried to replicate the bulb on/off code using cards. I've copy/pasted the w3 code

and change the image names to my own and it doesn't work. Can someone spot

what is wrong here?

I've attached a screen shot of what appears on my screen. The code for the small images

of the card back and ace of spades are there just to show i'm using the correct image name/location.

The idea is when i click the large card back image it should turn to the ace of spades but doesn't.

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_if_else2

 

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<img src="images/card back.jpg" width="50" height="50">
<img src="images/Ace Spades.png" width="50" height="50">


<img id="myImage" onclick="changeImage()" src="images/card back.jpg" width="100" height="180">

<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("card back")) {
    image.src = "images/Ace Spades.png";
  } else {
    image.src = "images/card back.jpg";
  }
}
</script>
</body>
</html>

Capture.PNG

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...