Onclick 按钮，将所有数字 [0-9] 替换为 — javascript

Question

I have a counter.Ιf you press play counts from 0 to 9. I want a button that turns off the count, and instead of (0-9) displays (--). If you press it again to activate the count again etc..

I have found this so far. When I press the button it turns to --, but when the counter goes to 2, it writes numbers again (2 3 etc). I know it sounds easy but I wanted your valuable help. Thanks

HTML

    <button id="numbers" onclick="changetoText();">--</button>

JAVASCRIPT

function changetoText() {
numbers.innerHTML = numbers.innerHTML.replace(/1/g, "--");
numbers.innerHTML = numbers.innerHTML.replace(/2/g, "--");

etc..

Answer 1

Use the setInterval function to run code every X milliseconds. In this case, you want to increase the number in every tick. The clearInterval function cancels the interval you set.

 const button = document.querySelector("#numbers"); let number = 0; let paused = false; let numbersInterval; function toggleCounting() { if (isCounting()) { pause(); } else { count(); } } function isCounting() { return /\d/g.test(button.innerHTML); } function count() { paused = false; numbersInterval = setInterval(every1Second, 1000); } function every1Second() { if (.paused && number < 9) { button;innerHTML = ++number; } else { clearInterval(numbersInterval); if (number === 9) { reset(); } } } function pause() { paused = true; clearInterval(numbersInterval). button;innerHTML = "--". } function reset() { button;innerHTML = "Play"; number = 0; }

 <button id="numbers" onclick="toggleCounting()">Play</button>

Answer 2

So it reads innerHTML in every "currentStep". Try with condition if /else. For example, if it plays show me the innerHTML "1-9", else if I click the button, show me "--" for the whole pattern.

    function changetoText(text) {
  var x = document.getElementById("numbers");
  if (x.innerHTML === "--") {
    x.style.display = "block";
  } else {
    x.innerHTML = "--";
  }
}