Toggle button : Hide counter numbers with background Color
Onclick button, I want to hide the numbers of this counter with background-color i.e.yellow). For example I want the yellow color in front of numbers, something like z-index 1.
If I click again I want to remove yellow color and show me the numbers of the counter again, something like z-index -1. Is it possible? I have tried this.. Thanks
var countStep = 0;
function counter() {
document.getElementById("btnToggle").innerHTML = ++countStep;
}
function btnColor(btn, color) {
var property = document.getElementById(btn);
if (property.className !== 'toggled') {
property.style.backgroundColor = color;
property.className = 'toggled'
} else {
property.style.backgroundColor = "rgb(244,113,33)";
property.className = '';
}
}
#btnToggle {
background: #222;
color: lime;
}
<p id="btnToggle">OFF</p>
<button onClick="countNumbers = setInterval(counter, 1000)">Play</button>
<button onClick="clearInterval(countNumbers)">Stop</button>
<input type="button" id="btnToggle" value="Toggle" onclick="btnColor('btnToggle','rgb(255,242,0)');" />
from Recent Questions - Stack Overflow https://ift.tt/3dcQq8A
https://ift.tt/eA8V8J
Comments
Post a Comment