Jump to content
Allerious

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...