电子投票界面：JavaScript中pisca类仅单次切换问题求助

问题根源 #

当前代码存在两个关键问题：

1. 输入逻辑使用innerText += el.innerText，导致第二个输入框可重复追加数字，未实现"单个输入框仅存一个数字"的需求。
2. 未检查当前输入框是否已有内容，也未处理最后一个输入框的边界场景，导致焦点无法持续向后切换。

修复后的JavaScript代码 #

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

  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 => {
    // 若当前焦点输入框已有内容，直接返回避免重复输入
    if (this.pisca.innerText.trim() !== '') return;
    
    // 仅设置当前点击的单个数字，而非追加
    this.pisca.innerText = el.innerText;
    
    this.pisca.classList.remove("pisca");
    // 确认下一个元素是输入框时才切换焦点
    const nextInput = this.pisca.nextElementSibling;
    if (nextInput && nextInput.classList.contains("digitos-tela")) {
      nextInput.classList.add("pisca");
      this.pisca = nextInput;
    }
  }
}

urna = new urnaEletronica()
urna.inicia()

修复细节说明 #

• 单输入框限制：在输入逻辑开头检查当前焦点框的内容，已有内容则拒绝后续输入，确保每个输入框仅存一个数字。
• 输入内容控制：将追加逻辑改为直接赋值，避免同一输入框多次输入。
• 边界场景处理：切换焦点前校验下一个元素的合法性，防止最后一个输入框切换时报错，同时更新焦点指向。

效果验证 #

修复后，每个.digitos-tela输入框仅能输入一个数字，输入完成后焦点自动切换至下一个输入框，直到所有输入框填满后停止切换。

内容的提问来源于stack exchange，提问作者Paulo1706