Entrar Ainda não tem acesso?
2
respostas

[Projeto] Pesquisei e usei localStorage

Referente ao curso JavaScript: construindo páginas dinâmicas, no capítulo Integrando JavaScript ao projeto e atividade Lista de exercícios

por Estudante
| 228k xp | 135 posts

Alguma sugestão de como deveria fazer melhor? Alguma prática melhor que eu deveria fazer com JavaScript?

    <script>
      //console.log("Estou estudando JavaScript!");
      let clickCount = 0;

      function secondClick(a, b, clickCount) {
        console.log("a:"+a);
        console.log("b:"+b);
        document.querySelector('h2').innerHTML = a-b;
        clickCount = 0;
      };

      function clickingButton() {
        clickCount++;
        const theButton = document.getElementById("adicionar-item");
        const input = document.getElementById("input-item").value;
        console.log("input:"+input);
        console.log("clickCount:"+clickCount);
        console.log("theButton:"+theButton);
        if (clickCount==1) {
          localStorage.setItem("a", input);
        } else {
          theButton.addEventListener('click', 
            secondClick(localStorage.getItem("a"), input, clickCount)
          );
        }
      }
    </script>

Digitando 8 no primeiro clique e 5 no segundo clique, fiz no projeto didático:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
por Rafaela Petelin Silvério
| 1079.9k xp | 2440 posts
Alura Scuba Team

Oi, Estudante! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Você trouxe uma abordagem legal para testar o localStorage, e usar os cliques como gatilho foi uma ideia criativa. Um ponto para observar: ao adicionar o addEventListener, a função secondClick(...) está sendo executada imediatamente. Isso pode gerar comportamentos inesperados.

Uma dica interessante para o futuro é usar uma função anônima ao passar parâmetros no addEventListener:


theButton.addEventListener('click', () => {
  secondClick(localStorage.getItem("a"), input, clickCount);
});

Esse código usa uma arrow function para que secondClick só seja executada no clique, e não no momento da definição do evento.

Alura

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

por Estudante
| 228k xp | 135 posts

Aprimorei meu código. Assim, corrigi os bugs que estavam ocorrendo:

    <script>
      let clickedOnce = false;

      function secondClick(a, b, clickedOnce) {
        document.querySelector('h2').innerHTML = a-b;
      };

      function clickingButton() {
        clickedOnce = !clickedOnce;
        const theButton = document.getElementById("adicionar-item");
        const input = document.getElementById("input-item").value;
        if (clickedOnce) {
          localStorage.setItem("a", input);
        } else {
          theButton.addEventListener('click', 
            secondClick(localStorage.getItem("a"), input, clickedOnce)
          );
        }
      };
    </script>