Cree un contador de clics simple usando JavaScript

1. Haga clic en el contador en un botón con JavaScript
2. Haga clic en Contador en un div usando JavaScript
3. Contador de clics: el enfoque no obstructivo
4. Observaciones

Un contador de clics registra el número de clics y lo muestra en la pantalla. El contador hace uso del evento click de JavaScript para incrementar el valor del contador. Podemos usarlo en varias áreas, incluso en juegos (para aumentar los puntos o el valor de la puntuación) y en algunos trucos para ahorrar tiempo. Echemos un vistazo al código para crear un contador de clics simple en JavaScript.

Haga clic en el contador en un botón con 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;
}

En el código, incrementamos el valor de la variable de contador counterVal en 1 en cada clic del usuario. Los pasos son los siguientes.

El ejemplo de código anterior muestra el contador de clics y lo incrementa al hacer clic en un botón. En la mayoría de los casos de uso, es posible que no apliquemos el contador de clics siempre en un botón. Para hacerlo flexible, tendremos que admitir la función para otros elementos HTML como div, li, etc. Casi todos los elementos HTML tienen el evento click con el controlador de eventos onclick.

Haga clic en Contador en un div usando JavaScript

En los juegos, las escenas no siempre tienen un botón para activar el incremento del contador. En su mayoría, puede estar compuesto por elementos HTML como div. En tales casos, podemos usar el controlador de eventos onclick de la etiqueta div para capturar el clic para incrementar el valor del contador. Consulte el siguiente ejemplo de código.

<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;
}

Puede observar que en este ejemplo hemos usado div en la línea <div onclick="incrementClick()">Click Me</div>. Con este cambio, el incrementClick() se activa con un clic del div en lugar del botón. El código funcionará bien con etiquetas HTML como <li>, <a>, <div>, etc. también. Casi todas las etiquetas HTML que soportan los manejadores de eventos onclick pueden asociarse con un oyente onclick y funcionar de manera similar.

Contador de clics: el enfoque no obstructivo

Si implementamos el contador de clics con un enfoque sin obstáculos en JavaScript, necesitaremos eliminar el controlador de eventos onclick en HTML y moverlo al código JavaScript. Sin embargo, la estructura del código se ve un poco diferente, observe el siguiente código de muestra.

<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;
}

Aquí, enlazamos los eventos de clic en código JavaScript. La estructura sigue siendo la misma, excepto que usamos un oyente onclick para el div Click Me y el botón Reset. Esta vinculación tiene lugar en el tiempo de ejecución. Y a ese oyente de clics, vinculamos nuestras funciones definidas. Entonces el código se ve similar y no tiene muchos cambios.

Observaciones

La diferencia entre el enfoque sin obstáculos es que enlazamos el oyente onclick en el código javascript en lugar de hacerlo en el HTML. Será difícil darse cuenta solo del HTML si al botón o al div se le asigna un controlador de eventos onclick.

Con este enfoque, el código se ve más limpio ya que todos los eventos onclick están vinculados y manejados en JavaScript. Mantiene el HTML limpio con el marcado ya que ningún código JavaScript se entromete en HTML.

El código no funcionará si no configuramos el oyente onclick dentro de la función window.onload. El código document.getElementById("click-div") devolverá null ya que no podrá encontrar el elemento HTML. La función wondow.onload se activa una vez que se carga la ventana y el DOM está listo. Por lo tanto, al poner el código dentro del bloque window.onload se asegura que el elemento HTML se cargue y se pueda consultar con la función document.getElementById() de JavaScript.