Changing an icon image on click

Question

Here is what I want to do. There are four icons, and when we click on an icon, its background image should change. When we click again on it, the first image should come again. Here is my code. Thanks for your help ; I spent some time but I didn't find the solution: the "if" block doesn't not recognize the value of the background. Thanks a lot for helping me.

<!DOCTYPE html>
<html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>Test</title>
        <style type="text/css">
    #image1, #image2, #image3, #image4 {
    background: url('icon1.png');
        width:24px;
    height:24px;
        }
    </style>
</head>
<body>

    <p id="image1" onclick="change(this)"></p>
    <p id="image2" onclick="change(this)"></p>
    <p id="image3" onclick="change(this)"></p>
    <p id="image4" onclick="change(this)"></p>

    <script type="text/javascript">
    function change(element) {
        if(element.style.background == "url('icon1.png')") {
            element.style.background = "url('icon2.png')";
        } else {
            element.style.background = "url('icon1.png')";
        }
    }       
    </script>

</body>
</html>

Sorry, I'm new on this site. I'll try to correct it. But you should more try to resolve my problem than say that. — user3601480, May 04 '14 at 14:09
possible duplicate of [Get a CSS value with JavaScript](http://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript) — JJJ, May 04 '14 at 14:12
@user3601480 I removed the -1 after you edited the title. No worries, elcome to the site. — Ronni Skansing, May 04 '14 at 14:12
I think that : if(element.style.background == "url('icon1.png')") { doesn't work. The if boucle can't get the value... — user3601480, May 04 '14 at 14:15
@Juhana I'm guessing he meant "if statement". In french, "boucle" is a loop. Maybe user3601480 is confusing an if statement and a loop or maybe it's in another language... — Maxime Morin, May 04 '14 at 14:16
Sorry, I'm french and I try to find the good word in english ! — user3601480, May 04 '14 at 14:17
So, I think that the if statement can't make the compare between element.style.background and "url('icon1.png')" — user3601480, May 04 '14 at 14:18
Yes, that is the case. [Use `getComputedStyle()`](http://stackoverflow.com/a/6338234). — JJJ, May 04 '14 at 14:19
I'm not sure I gave a good explain to what I would like to do. — user3601480, May 04 '14 at 14:23
I would like that if icon1 is on, it is remplaced by icon2 and if icon2 is on, it is remplaced by icon1. — user3601480, May 04 '14 at 14:27

score 0 · Answer 1 · answered May 04 '14 at 15:05

The if condition wont probably result as true for the first time as background-image is applied through css class and not inline style.

So the solution would be

function change(element) {
  var imgURL = window.getComputedStyle(element).getPropertyValue("background-image");
  if(imgURL == "url('icon1.png')") {
    element.style.background = "url('icon2.png')";
  } else {
    element.style.background = "url('icon1.png')";
  }
}

Changing an icon image on click

1 Answers1