Javascript：单击时更改图像，然后再次单击时返回原始图像

Question

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 pretty much sums up what I am trying to accomplish, If you need more information leave a comment asking for what you would like to know.

The main part of this code I want to get working is the myFunction, the rest are examples I made so that people can better understand my thought process, here is the code:

 function myFunction() { var demoStyle = document.getElementById("demo").style.backgroundImage; var blue = "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)"; var red = "url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg)"; var x = (demoStyle == blue); if (demoStyle == blue) { demoStyle = blue; document.getElementById("demo").innerHTML = "Should have turned Blue"; alert('Is the document Blue? Javascript says: ' + x + '.'); } else { demoStyle = red; document.getElementById("demo").innerHTML = "Should have turned Red"; alert('Is the document Red? Javascript says: ' + x + '.'); } } function myFunction_NoVars() { 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)"; document.getElementById("demoNoVars").innerHTML = "Should have turned Blue"; } else { document.getElementById("demoNoVars").style.backgroundImage == "url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg)" document.getElementById("demoNoVars").innerHTML = "Should have turned Red"; } } function my_2nd_Function() { document.getElementById("demo2").style.backgroundImage = "url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg)"; document.getElementById("demo2").innerHTML = "Should have turned Red"; }

 div {text-align:center;padding:5px;height:100px;width:100px;background-image:url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg);} button {margin-top:10px;padding:5px;min-width:50px;} h2 {margin:0;padding:0;} hr {margin-bottom:10px;padding:0;}

 <h2>Has Errors:</h2><hr /> <div id="demo"></div> <button onclick="myFunction()">Run</button> <br /><br /> <div id="demoNoVars"></div> <button onclick="myFunction_NoVars()">Run w/ No Variables</button> <br /><br /> <h2>Doesn't Have Errors:</h2><hr /> <div id="demo2"></div> <button onclick="my_2nd_Function()">Run</button> <p><strong>NOTE:</strong> This one changes, but I'm trying to create something that will change between the two every time the button is clicked.</p>

There is also a live preview here , JSfiddle here . Thank you for any help.

Answer 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> 

Answer 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> 

Answer 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.

Answer 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"> 

Answer 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!

Answer 6

 let x = document.getElementById("image1"); let state = false; function transition() { x.src = state? "image.jpg": "image2.jpg"; state =;state; }

 body { display: grid; justify-content: center; align-items: center; } img { cursor: pointer; width: 10em; height: 10em; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="image.jpg" id="image1" onclick="transition()"> <script src="script.js"></script> </body> </html>