用户点击在 JavaScript 中仅传递一次以及其他行为

Question

我遇到了 HTML、CSS 和 JS 的意外行为...我正在构建一个界面，它在每个输入中接收一个数字，但是“pisca”类具有为每个输入接收一个元素的魔力，并且将其传递给下一个等待用户点击，只传递一次，这意味着我可以在第一个输入中输入一个数字，在第二个输入中输入几个数字，而其他输入将变得无法访问。我相信如果我把代码放在这里，它会太长太复杂，所以我决定将它部署在 CodePen 上，在这里你可以看到源代码并更好地理解我的问题：https://codepen.io/pen？模板=ZEZZGYV

（在JS中）我尝试通过在函数开头声明“pisca”变量来改变逻辑来解决它，但没有成功。

function urnaEletronica() {
  this.pisca = document.querySelector(".pisca");
  this.contador = document.querySelector(".contador");
  this.digito = document.querySelector(".digitos-tela");

  this.inicia = () => {
    this.capturaCliques();
    this.atualizaTimer();
  };

  let minutos = 99;
  let segundos = 0;
  let timerInterval;

  this.atualizaTimer = () => {
    timerInterval = setInterval(() => {
      if (segundos === 0) {
        segundos = 59;
        minutos--;
      }
      if (minutos === 0 && segundos === 0) {
        this.contador.innerHTML = `${(minutos = 0)}:${segundos
          .toString()
          .padStart(2, "0")}`;
        clearInterval(timerInterval);
        console.log("Tempo esgotado!");
        return (window.location.href = "resultados.html");
      }
      this.contador.innerHTML = `${minutos}:${segundos
        .toString()
        .padStart(2, "0")}`;
      segundos--;
    }, 1000);
  };

  this.capturaCliques = () => {
    document.addEventListener("click", (event) => {
      const el = event.target;

      if (el.classList.contains("numeros")) this.adicionaTela(el);
    });
  };

  this.adicionaTela = (el) => {
    /*let somNumeros = new Audio();
    somNumeros.src = "audios/numeros.mp3";
    somNumeros.play();*/
    this.pisca.innerText += el.innerText;
    this.digito.classList.remove("pisca");
    this.digito.nextElementSibling.classList.add("pisca");
    this.pisca = document.querySelector(".pisca");
  };
}
urna = new urnaEletronica();
urna.inicia();

Answer 1

您最初运行此代码：

this.digito = document.querySelector(".digitos-tela");

选择第一个元素。然而 this.digito 永远不会更新，所以当您运行此代码时：

this.digito.classList.remove("pisca");
this.digito.nextElementSibling.classList.add("pisca");

您只需从 

first

元素中删除

"pisca"

类，并将其添加到 second 元素中。而不是从 current 元素中删除它并将其添加到 next 元素中。 例如，如果您将

this.digito

更改为

this.pisca

：

this.pisca.classList.remove("pisca");
this.pisca.nextElementSibling.classList.add("pisca");

您会发现它在所有数字之间正确移动。这是因为它现在正在从 

current

pisca 元素中删除该类，并将其添加到 next 元素中。