how to change button icon on click?
css, html, javascript
Solution
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
Problem
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)