Puedes conseguir el efecto deseado cambiando un poco la estructura HTML, es decir, esta:
<button type="button" class="botonClic">Botón 1</button>
...
Por esta otra:
<div class="buttons">
<button type="button" class="botonClic" data-number="0">Botón 1</button>
...
</div>
Y utilizar delegación de eventos.
Note que se ha agregado el atributo data-number="0"
para obtener un valor inicial a partir de él.
Ejemplo completo
Ahora que tenemos claro lo anterior podemos reproducir el ejemplo completo que será explicado más abajo:
const buttons = document.querySelector(".buttons");
buttons.onclick = (e) => {
const control = e.target;
let valor;
if ( control.dataset.number ) {
// El valor inicial de valor es el valor del atributo
// «data-number»:
valor = Number(control.dataset.number);
valor++;
// Se actualiza el valor del atributo «data-number»
control.dataset.number = valor;
// Luego se actualiza el texto del botón.
control.textContent = valor;
}
}
<h3>Haz click en los botones y sabrás cuántas veces lo has hecho</h3>
<div class="buttons">
<button type="button" class="botonClic" data-number="0">Botón 1</button>
<button type="button" class="botonClic" data-number="0">Botón 2</button>
<button type="button" class="botonClic" data-number="0">Botón 3</button>
</div>
Explicación
Obtenemos el botón con:
const control = e.target;
Recuerde que e.target
puede ser cualquier elemento donde se haga clic, de allí, la importancia de identificar el elemento que nos interesa.
Creamos nuestra variable valor
, que es la que actualizará el valor del atributo data-number
:
let valor;
Consultamos si el elemento objetivo (en este caso, el botón) tiene definido el atributo data-number
:
if ( control.dataset.number ) {
...
}
Obtenemos su valor inicial a partir de dicho atributo:
valor = Number(control.dataset.number);
Actualizamos el valor del atributo data-number
:
valor++;
control.dataset.number = valor
Y finalmente, el texto del botón:
control.textContent = valor;