Пользовательский клик передается только один раз в JavaScript вместе с другим поведением ⇐ CSS

[Anonymous]

Я столкнулся с неожиданным поведением при работе с HTML, CSS и JS... Я создаю интерфейс, в котором он получает число на каждом входе, но класс "pisca", который творит чудеса, получая по одному элементу за каждый вход. input и передает его следующему ожиданию щелчка пользователя, передается только один раз, а это означает, что я могу ввести число в первый вход, а во второй - несколько чисел, а остальные входы станут недоступными. Я считаю, что если я помещу код сюда, он будет слишком длинным и сложным, поэтому я решил развернуть его на CodePen, где вы сможете увидеть исходный код и лучше понять мою проблему: https://codepen.io/pen?template =ZEZZGYV
(в JS) Я пытался изменить логику, объявив переменную "pisca" в начале функции для ее решения, но это не сработало.

Код: Выделить всё

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 =>  {
/*let somNumeros = new Audio();
somNumeros.src = "audios/numeros.mp3";
somNumeros.play();*/
this.pisca.innerText += el.innerText;
this.pisca.classList.remove("pisca");
this.pisca.nextElementSibling.classList.add("pisca");
this.pisca = document.querySelector(".pisca")
}

}
urna = new urnaEletronica()
urna.inicia()

Код: Выделить всё

@keyframes pisca {
0% {opacity: 0.2;}
50% {opacity: 1;}
100% {opacity: 0.2;}
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 10px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
background: #787b78;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.contador{
position: absolute;
margin-top: -430px;
font-size: 40px;
color: #eee;
}

.urna {
border-radius: 5px;
background: rgb(196, 196, 196);
height: 70vh;
max-height: 100%;
max-width: 100%;
width: 90vw;
display: flex;
justify-content: space-between;
}

.tela-urna {
background: white;
border-color: #eee;
width: 50%;
height: 90%;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
}

.digitos-urna {
background-color: #4f514f;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1.5rem;
margin: 20px auto;
}

.digitos-urna>div {
font-size: 20px;
}

.digitos-urna>div {
font-size: 20px;
border-radius: 5px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.digitos-urna>div:hover{
background: rgb(62, 62, 62);
transition: all 0.25s;

}

.digitos-tela{
width: 70px;
height: 120px;
border: 2px solid #555;
font-size: 20px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}

.pisca{
animation-name: pisca;
animation-duration: 1s;
animation-iteration-count: infinite;
}

.branco{
background-color: #FFF;
color: #000;
font-size: 13px;
}

Код: Выделить всё

Urna Eletrônica



















5:00






1
2
3

4
5
6

7
8
9

0


Branco
Corrige
Confirma

Подробнее здесь: https://stackoverflow.com/questions/783 ... r-behavior