Пользовательский клик передается только один раз в JavaScript вместе с другим поведением
Я испытываю неожиданное поведение с HTML, CSS и JS... Я создаю интерфейс, в котором он получает число на каждом входе, но класс "pisca", который творит чудеса, получая один элемент на каждый вход, и передает он переходит к следующему ожиданию щелчка пользователя, передается только один раз, а это означает, что я могу ввести число в первый вход, а во второй - несколько чисел, а другие входы станут недоступными. Я считаю, что если я помещу код сюда, он будет слишком длинным и сложным, поэтому я решил разместить его на 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.info("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;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Urna Eletrônica</title>
<link rel = "stylesheet" href = "/css/index.css">
<link rel = "icon" type = "image/png" sizes = "16x16" href = "/favicons/favicon-16x16.png">
<link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicons/favicon-32x32.png">
<link rel = "apple-touch-icon" sizes = "57x57" href = "/favicons/apple-touch-icon-57x57.png">
<link rel = "apple-touch-icon" sizes = "60x60" href = "/favicons/apple-touch-icon-60x60.png">
<link rel = "apple-touch-icon" sizes = "72x72" href = "/favicons/apple-touch-icon-72x72.png">
<link rel = "apple-touch-icon" sizes = "76x76" href = "/favicons/apple-touch-icon-76x76.png">
<link rel = "icon" type = "image/png" sizes = "96x96" href = "/favicons/apple-touch-icon-96x96.png">
<link rel = "apple-touch-icon" sizes = "114x114" href = "/favicons/apple-touch-icon-114x114.png">
<link rel = "apple-touch-icon" sizes = "120x120" href = "/favicons/apple-touch-icon-120x120.png">
<link rel = "apple-touch-icon" sizes = "144x144" href = "/favicons/apple-touch-icon-144x144.png">
<link rel = "apple-touch-icon" sizes = "152x152" href = "/favicons/apple-touch-icon-152x152.png">
<link rel = "apple-touch-icon" sizes = "180x180" href = "/favicons/apple-touch-icon-180x180.png">
<link rel = "icon" type = "image/png" sizes = "192x192" href = "/favicons/android-icon-192x192.png">
<meta name = "msapplication-TileColor" content = "#ffffff">
<meta name = "theme-color" content = "#ffffff">
</head>
<body>
<div class = "contador" style = "display: none;">5:00</div>
<div class = "urna">
<div class = "tela-urna">
<div class = "cargo"></div>
<div class = "digitos-tela pisca"></div>
<div class = "digitos-tela"></div>
<div class = "digitos-tela"></div>
<div class = "digitos-tela"></div>
<div class = "digitos-tela"></div>
</div>
<div class = "digitos-urna">
<div class = "numeros">1</div>
<div class = "numeros">2</div>
<div class = "numeros">3</div>
<div class = "numeros">4</div>
<div class = "numeros">5</div>
<div class = "numeros">6</div>
<div class = "numeros">7</div>
<div class = "numeros">8</div>
<div class = "numeros">9</div>
<div class = "zero">
<div>0</div>
</div>
<div class = "botoes-especiais">
<div class = "branco">Branco</div>
<div class = "corrige">Corrige</div>
<div class = "confirma">Confirma</div>
</div>
</div>
</div>
<script src = "/js/index.js"></script>
</body>
</html>Кроме того, неплохо иметь заголовок вопроса, который на самом деле описывает проблему с некоторой степенью технических подробностей, а не что-то вроде заголовка, который по сути звучит как «Помогите!».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Сначала вы запускаете этот код:
this.digito = document.querySelector(".digitos-tela");
Который выбирает первый элемент. Однако this.digito никогда не обновляется, поэтому при запуске этого кода:
this.digito.classList.remove("pisca");
this.digito.nextElementSibling.classList.add("pisca");
Вы просто удаляете класс "pisca" из первого элемента и добавляете его ко второму элементу. Вместо того, чтобы удалять его из текущего элемента и добавлять к следующему элементу.
Например, если вы измените this.digito на this.pisca:
this.pisca.classList.remove("pisca");
this.pisca.nextElementSibling.classList.add("pisca");
Вы обнаружите, что он правильно перемещается между всеми цифрами. Это потому, что теперь класс удаляется из текущего элемента pisca и добавляется к следующему.
эй, спасибо за ответ и вклад в решение, но когда код фокусируется на последнем элементе div, который получает пользовательский ввод, консоль выдает ошибку на экране (вы можете проверить рассматриваемую ошибку, когда я обновил код в сообщении)
Привет @Paulo1706 — это связано со строкой this.pisca.nextElementSibling.classList.add("pisca");, которая пытается выбрать следующий элемент. Однако это не «следующий» элемент, когда вы находитесь на последней цифре, поэтому свойство .classList недействительно, что приводит к ошибке. Итак, перед этой строкой вы можете проверить наличие if (this.pisca.nextElementSibling == null). Если он равен нулю, то вы можете поместить код для всего, что вы хотите, после ввода туда последней цифры (я не уверен, что это такое!) И если он НЕ равен нулю, вы можете запустить эти последние 2 линии.
Возникла проблема с вашей функцией adicionatTela.
Выберите следующий элемент digito, чтобы добавить класс, но проблема в том, что существующий элемент вызывается обратно без инициализации this.digito для следующего элемента.
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 = this.digito.nextElementSibling;
this.digito.classList.add("pisca");
console.info(12);
this.pisca = document.querySelector(".pisca");
};
На этом сайте есть свои собственные инструменты, очень похожие на Codepen.