2021-03-29

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

No comments:

Post a Comment