Question

127

how to change button icon on click?

rated 0 times [ 131] [ 4] / answers: 1 / hits: 38112 / 11 Years ago, thu, june 27, 2013, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kevonmoisesf

Add To Favorites

Follow

Total Points: 693

Total Questions: 101

Total Answers: 128

Location: Reunion

Member since Mon, Dec 28, 2020

4 Years ago

kevonmoisesf questions

1 Bootstrap 5 update Tooltip Title with Javascript

Sat, Jan 23, 21, 00:00, 3 Years ago

1 How to wait for reaction and only then send message [discord.js]

Thu, Aug 13, 20, 00:00, 4 Years ago

1 How do you display content of a .JSON file using Discord.js?

Tue, Feb 18, 20, 00:00, 4 Years ago

1 Flatpickr : set default date only if date value is null/empty

Tue, Nov 5, 19, 00:00, 5 Years ago

1 VueJs object key/value is not reactive in v-for loop

Wed, Jun 12, 19, 00:00, 5 Years ago

View All

answered 11 Years ago michaelashelbieh · Accepted Answer

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