Question 383906 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – User Click only passing once in JavaScript along with other behavior

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.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;
}
<!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>
Tags:

2

Answers


  1. 0

    You initially run this code:

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

    Which selects the first element. However this.digito is never updated, so when you run this code:

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

    You are simply removing "pisca" class from the first element, and adding it to the second element. Rather than removing it from the current element and adding it to the next element.

    So for example, if you change this.digito to this.pisca:

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

    You will find that it moves between all of the digits correctly. This is because it’s now removing the class from the current pisca element, and adding it to the next one.

    Login or Signup to reply.
  2. 0

    There is a problem with your function adicionatTela.

    Select the next element of digito to add a class, but the problem is that the existing element is called back without initializing this.digito to the next element.

    
    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.log(12);
        this.pisca = document.querySelector(".pisca");
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search