Crie um contador de cliques simples usando JavaScript

Um contador de cliques registra o número de cliques e o exibe na tela. O contador usa o evento JavaScript click para incrementar o valor do contador. Podemos usá-lo em várias áreas, inclusive em jogos (para aumentar os pontos ou o valor da pontuação) e em alguns hacks que economizam tempo. Vejamos o código para criar um contador de cliques simples em JavaScript.

Clique no contador em um botão usando JavaScript

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <button onclick="incrementClick()">Click Me</button>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>

var counterVal = 0;

function incrementClick() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

No código, incrementamos o valor da variável do contador counterVal em 1 a cada clique do usuário. As etapas são as seguintes.

O exemplo de código acima exibe o contador de cliques e o incrementa com um clique de botão. Na maioria dos casos de uso, podemos não aplicar o contador de cliques sempre em um botão. Para torná-lo flexível, teremos que suportar o recurso para outros elementos HTML como div, li etc. Quase todos os elementos HTML têm o evento click com o manipulador de eventos onclick.

Clique no contador em uma div usando JavaScript

Nos jogos, as cenas nem sempre têm um botão para acionar o incremento do contador. Geralmente, pode ser feito de elementos HTML como div. Nesses casos, podemos usar o manipulador de eventos onclick da tag div para capturar o clique e incrementar o valor do contador. Consulte o exemplo de código a seguir.

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div onclick="incrementClick()">Click Me</div>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>

var counterVal = 0;

function incrementClick() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

Você pode observar que neste exemplo usamos div na linha <div onclick="incrementClick()">Click Me</div>. Com esta mudança, o incrementClick() é acionado com um clique do div em vez do botão. O código funcionará bem com tags HTML como <li>, <a>, <div> etc. também. Quase todas as tags HTML que suportam os tratadores de evento onclick podem ser associadas a um ouvinte onclick e trabalhar de forma semelhante.

Clique no contador - a abordagem não obstrutiva

Se implementarmos o contador de cliques com uma abordagem desobstruída em JavaScript, precisaremos remover o manipulador de eventos onclick em HTML e movê-lo para o código JavaScript. A estrutura do código parece um pouco diferente, observe o código de exemplo a seguir.

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div id="click-div">Click Me</div>
        <button id="reset-button">Reset</button>
    </div>
</center>

window.onload =
    function() {
  let clickDiv = document.getElementById('click-div');
  clickDiv.onclick = incrementClick;

  let resetBtn = document.getElementById('reset-button');
  resetBtn.onclick = resetCounter;
}

var counterVal = 0;

incrementClick =
    function() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

Aqui, vinculamos os eventos de clique ao código JavaScript. A estrutura permanece a mesma, exceto que usamos um ouvinte onclick para a div Click Me e o botão Reset. Essa ligação ocorre em tempo de execução. E a esse ouvinte de clique, vinculamos nossas funções definidas. Portanto, o código é semelhante e não tem muitas alterações.

Observações

A diferença entre a abordagem desobstruída é que vinculamos o ouvinte onclick ao código javascript em vez de fazê-lo no HTML. Será difícil perceber apenas a partir do HTML se o botão ou div está atribuído a um manipulador de eventos onclick.

Com esta abordagem, o código parece mais limpo, pois todos os eventos onclick são vinculados e tratados no JavaScript. Ele mantém o HTML limpo com a marcação, pois nenhum código JavaScript se intromete no HTML.

O código não funcionará se não definirmos o ouvinte onclick na função window.onload. O código document.getElementById("click-div") retornará null, pois não será capaz de localizar o elemento HTML. A função wonderow.onload é acionada assim que a janela é carregada e o DOM está pronto. Portanto, colocar o código dentro do bloco window.onload garante que o elemento HTML seja carregado e possa ser consultado com a função document.getElementById() do JavaScript.