how to change button icon on click?

Question

I have this button, who have a icon (picture). Now, I want to do is on a click on a button icon (picture) will change to another icon and when you click again it will jump back on old icon. (like toggle principle).

Here is my button CSS code:

.w8-button {
    display: table;
    padding: 7px 15px 8px 15px;
    border: none;
    font-family: "open_sans_lightregular";
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.9;
}

and here is CSS icon code:

.w8-button.iconize {
    padding-right: 50px !important;
    background: url(D:/firstPicture.png) no-repeat 115px center;
}

And this is how I call my button in html:

<li>
  <input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>

Can somebody tell me how to do code in javascript, that when I click on button, icon (background picture) will change and stay like that, until you click again will go back to old one (like toggle system)

Are you willing to use jQuery? Its `.toggleClass()` function is perfect for this. — Barmar, Jun 27 '13 at 22:59
Before you put effort into writing a question I would recommend looking around for an existing answer that solves this problem. Answers like http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript & http://stackoverflow.com/questions/11006406/jquery-toggle-css-class cover this in detail. — Scott Sword, Jun 27 '13 at 23:12

Xotic750 · Accepted Answer · 2013-06-28T10:58:17.197

On a a modern browser that supports addEventListener and the Class List API (shims are available for both on their respective MDN pages to add support for older broswers), you could do this.

CSS

.w8-button {
    display: table;
    padding: 7px 15px 8px 15px;
    border: none;
    font-family:"open_sans_lightregular";
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.9;
}
.w8-button.iconize {
    padding-right: 50px !important;
    background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center;
}
.w8-button.iconize2 {
    padding-right: 50px !important;
    background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center;
}

HTML

<li>
    <input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>

Javascript

document.getElementById("w8-d-blue").addEventListener("click", function (e) {
    var target = e.target;

    target.classList.toggle("iconize");
    target.classList.toggle("iconize2");
}, false);

On jsfiddle

Thank you. You just save my nerves. That demo helped me a lot. Just million times thank you. — Tine Bertoncelj, Jun 28 '13 at 04:51
+1 good answer! Didn't know about `classList`. To the OP: Just be aware of its support (you may need to use a shim): http://caniuse.com/classlist — acdcjunior, Jun 28 '13 at 14:38

Euphe · Answer 2 · 2013-06-27T23:06:54.167

0

Quick solution

var switch = 0, element = document.getElementById("w8-d-blue"), img1, img2;
element.onclick = function(){

            if (switch == 0){
                element.style.backgroundImage(img1);
                switch = 1;
                }
            else {
                        element.style.backgroundImage(img2);
                switch = 0
                }

I think you are unaware of the wonders Jquery can bring you. If so you should really look it up, it makes many things like that much easier.

edited Jun 27 '13 at 23:06

answered Jun 27 '13 at 23:00

Euphe

3,531
6
39
69

2

You're 1) assuming he is using jQuery and 2) mixing a jQuery solution with a DOM solution which you should not do. If OP was to opt for a jQuery solution he/she should use .toggleClass(). – Scott Sword Jun 27 '13 at 23:05

score 0 · Answer 3 · answered Jun 27 '13 at 23:01

0

Here is how you can do this in jquery

$(function(){
  $("#w8-d-blue").click(function(){
     $(this).toggleClass("iconize");
     return true;
  });
});

To use jquery you'll have to add this to the head section of your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

and type the above code afterwards.

answered Jun 27 '13 at 23:01

reggaemahn

6,272
6
34
59

Unless you are writing unit tests that are based on a boolean value the return true isn't necessary. – Scott Sword Jun 27 '13 at 23:06
@Swordfish0321 It has been known to cause problems in certain browsers (read IE) because it could prevent the actual function that the button is supposed to do. We want the workflow to continue after the graphic change has been done. – reggaemahn Jun 28 '13 at 08:20
which version of IE are you talking about? The whole purpose of using jQuery in the first place is not only shorthand JS, but implicit cross-browser compatibility. So you're basically saying that undefined functions break jQuery in IE...not true sir. – Scott Sword Jun 28 '13 at 16:54

how to change button icon on click?

3 Answers3