Rick Sibley Rick Sibley - 1 month ago 8
Javascript Question

Javascript: Changing an image on click and then back to original when clicked again

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.


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() {
div.x {
  height: 100px;
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>