Changing image onclick then changing it back in js-CodePudding

fiddle: https://jsfiddle.net/0r7v923u/2/

<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"  alt="Banner" onclick="ratesD(this)" />

JS:

function ratesD(image) {
  if (img.attr('src') == "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png") {
    image.src = "https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png";
  } else {
    image.src = "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"
  }
    
}

I am simply trying to change the image back and forth on click. The function below changes it but it does not return to the previous image:

function ratesD(image) {
    image.src = 'https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png';
}

I thought it only needs to change using img.attr('src') == what do I need to change for the if condition?

CodePudding user response：

First you are trying to access the wrong property of the image object (attr instead of src) and the second function is not checking the current image source before changing it. To fix this, the function should check the current src of the image and change it to the other URL depending on its value. Try this.

function ratesD(image) {
  if (image.src == "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png") {
    image.src = "https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png";
  } else {
    image.src = "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"
  }
}

<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"  alt="Banner" onclick="ratesD(this)" />

CodePudding user response：

It's a bad idea to force load/unload your images (even if they are in the system cache) every time you click on them.

Load them only once, and switch their display at each click.

const bannerImgs = document.querySelector('#banner-images');

bannerImgs.onclick =_=> bannerImgs.classList.toggle('seeOther');

#banner-images > img {
  width  : 100px;
  height : 100px;
  }
#banner-images.seeOther > img:first-of-type,
#banner-images:not(.seeOther) > img:last-of-type {
 display : none;
 }

<div id="banner-images" >
  <img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"  alt="Banner" >
  <img src="https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png"  alt="Banner" >
</div>