Javascript: Changing An Image On Click And Then Back To Original When Clicked Again

September 28, 2022 Post a Comment

Hello I have been looking around and I can't seem to find what I'm looking for. I have tried a few solutions suggested on other posts which have not worked in my favor. The title p

Solution 1:

If you are using jQuery, this is simple example, you can replace the background color to image

$( "div" ).click(function() {
  $( this ).toggleClass( "change" );
});

#box{
  background-color:red;
  width:300px;
  height:300px;
}

#box.change{
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class=""></div>

Solution 2:

There is no need for all that code. All you need to two CSS rules and to toggle a class name. The one CSS rule has the one image and the other rule has the other. You add the class and the second image appears.

var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    document.getElementById(this.dataset.for).classList.toggle("active");
  });
}

div.x {
  height: 100px;
  width:100px;
  background-image:url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg);
}
div.x.active {
  background-image: url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg);
}

<div class="x" id="demo"></div>
<button data-for="demo">Run</button>

<div class="x" id="demo2"></div>
<button data-for="demo2">Run</button>

Solution 3:

The first function doesn't set the background image. So it's not surprising it isn't changing. The second function checks if it's blue and if so, sets it to blue. The second function doesn't change it, it simply confirms existing state.

if (document.getElementById("demoNoVars").style.backgroundImage == "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)") {
    document.getElementById("demoNoVars").style.backgroundImage = "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)";

has the same url so nothing changes.

You should be swapping your if conditions in the second function and the first function should be setting the background.

Solution 4:

Here's a really simple script, I've used a data-attribute to store you second image, I grab these into an array and rotate.

var imgs = document.querySelectorAll('img');

[].slice.apply(document.querySelectorAll('img')).forEach(function (f) {
  var im = [ f.getAttribute("src"), f.getAttribute("data-src2") ];
  f.onclick = function () {
    var k = im.shift(1); im.push(k);
    f.setAttribute("src", im[0]);
  };
});

<img src="http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg"
     data-src2="http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg">
<img src="http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg"
     data-src2="http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg">
<img src="http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg"
     data-src2="http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg">

Solution 5:

I had a few issues when moving some of these answers to my environment, but using them to do more research I found something that worked for me.

I want to post the solution here just incase someone comes across this question and the other solutions didn't work in their environments either.

Here is the code:

function myFunction() {
    var x = document.getElementById("demo");
    if (x.className.indexOf("red") == -1) {
        x.className = x.className.replace("blue", " red");
    } else {
        x.className = x.className.replace("red", " blue");
    }
}

.blue {
    height: 100px;
    width:100px;
    background-image:url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg);
}
.red {
    height: 100px;
    width:100px;
    background-image: url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg);
}

<div id="demo" class="blue"></div>
<button onclick="myFunction()" >Button</button>

Thanks everyone for the responses!

Html5 Log