I’m experiencing unexpected behavior with HTML, CSS, and JS… I’m building an interface where it receives a number in each input, but the “pisca” class, which does the magic of receiving one element per input and passes it to the next waiting for the user’s click, is only being passed once, which means that I can input a number in the first input and in the second several numbers, and the other inputs become inaccessible. I believe that if I put the code here, it will be too long and complex, so I decided to deploy it on CodePen where you can see the source code and better understand my problem: https://codepen.io/pen?template=ZEZZGYV
(in JS) I tried to change the logic by declaring the “pisca” variable at the beginning of the function to solve it, but it didn’t work.
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();