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

Question

我有一个计数器。如果你按下播放从 0 到 9 的计数。我想要一个关闭计数的按钮，而不是 (0-9) 显示 (--)。如果你再按一次它再次激活计数等..

到目前为止我已经找到了。当我按下按钮时，它变为 --，但是当计数器变为 2 时，它再次写入数字（2 3 等）。我知道这听起来很简单，但我需要您的宝贵帮助。谢谢

HTML

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

JAVASCRIPT

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

等..

Answer 1

因此它在每个“currentStep”中读取 innerHTML。尝试条件 if /else。例如，if 显示 innerHTML "1-9" ， else 如果我点击按钮，显示 "--"整个模式。

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

Answer 2

使用 setInterval 函数运行每 X 毫秒编码一次。在这种情况下，您希望增加每个滴答中的数字。 clearInterval函数取消你设置的间隔

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>

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

Onclick button, replace all numbers [0-9] with -- javascript

javascript

onclick