Criar um contador de cliques
Dia 1 do projeto 30 dias com js
Olá, galera! O primeiro desafio do projeto de 30 dias com JS foi criar um contador de cliques, que basicamente exibe a quantidade de vezes que você clicou em um botão.
Para iniciar ele, criei um arquivo HTML com:
- Um botão
- Um parágrafo, de id
quantidade
Em seguida, passei para o JavaScript, onde criei a função ContadorDeCliques().
1
2
3
4
5
6
7
8
let contador = 0;
function ContadorDeCliques(){
let saida = document.getElementById('quantidade');
contador++;
saida.innerText = contador;
};
E, por fim, fiz o CSS para estilizar a página.
Esse é um desafio simples, mas muito bom para treinar o raciocínio. Muitas pessoas cometem o erro de colocar a variável do contador dentro da função, o que acaba gerando um problema.
Por que isso acontece?
Quando a variável está dentro da função, a cada clique no botão, o contador volta para 0 e soma 1 novamente. O resultado exibido na tela sempre será 1, pois o contador é reiniciado a cada clique, em vez de ser atualizado corretamente.
O resultado final você pode conferir aqui
link para o repositorio do projeto