Contador de clicks

Este ejemplo crea un botón en el que pulsar con el ratón. El script incrementa un contador cada vez que se haga clic en él y muestra el valor actualizado en la página.

 

Solución

<body>

<p>Pulsa en el botón</p>

<button id="contadorBtn">Clicks: 0</button>

</body>

<script>

   let contador = 0;

   const btn = document.getElementById('contadorBtn');

   btn.addEventListener('click', () => {

     contador++;

     btn.textContent = "Clicks: "+contador;

    });

</script>

 

Explicación

El codigo HTML solo contiene un elemento button cuyo atributo id, = "contadorBtn", usaremos luego en el script..

Y la parte del script es tan simple como localizar el botón mediante su id y asignarle un evento que va sumando uno a una variable, en este caso de nombre contador

El manejador del evento está definido en la misma instrucción de asignación de evento con una función de flecha.

El script incrementa en 1 la variable contador y anota el valor actual en el contenido del botón usando la proiedad innerText

Así de simple.