En este post explicaré algo muy simple: cómo saber cuando un usuario hace click en un botón de JavaScript, también cuando hace click sobre muchos botones y cómo acceder al elemento del DOM.
Esto también funcionará para saber cuando alguien hace click sobre otro elemento.
Foto tomada con Polacode y marca de agua puesta con waterpy.
Vamos a usar querySelector, querySelectorAll y addEventListener para ejecutar una función en el click del elemento.
Breve introducción a querySelector
Nota: si quieres leer más sobre querySelector y querySelectorAll mira este post.
Han pasado los años y ahora ya existe querySelector, hace años se usaba getElementById, getElementsByClassName o la librería de jQuery.
¿Por qué estas funciones? bueno, porque así se obtenía la referencia a un elemento del DOM. Qué difícil era, por ejemplo, obtener todos los botones con determinada clase o atributo. Más tarde salió jQuery que simplificaba la selección así como se hace con CSS y el resto es historia.
Ahora, con document.querySelector y document.querySelectorAll podemos seleccionar más elementos de manera fácil y sin librerías de terceros.
Agregar función en el click de un botón con JavaScript
Es recomendable ponerle un id al botón, o una clase cuando son muchos, como veremos más tarde. En este caso le ponemos el id “miBoton“. Obtenemos la referencia al mismo y luego le agregamos un listener o escuchador para cuando se haga click.
Aquí el código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Escuchar click de botón</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button id="miBoton">Haz click sobre mí :)</button>
<script src="script.js"></script>
</body>
</html>// Obtener referencia a botón
// Recuerda: el numeral o # indica id
const boton = document.querySelector("#miBoton");
// Agregar listener
boton.addEventListener("click", function(evento){
// Aquí todo el código que se ejecuta cuando se da click al botón
alert("Le has dado click");
});Fíjate que accedemos al botón con un selector CSS, ya que el símbolo # indica id. Lo ponemos en una constante por buena práctica.
Después de eso agregamos un listener con addEventListener, el primer argumento es el tipo de evento (click) y el segundo una función que se llamará cuando se haga click.
Por cierto, en lugar de la función anónima, podríamos pasarle el nombre de una función definida en otro lugar.
Acceder al botón y al evento cuando se hace click
Para acceder al botón, hay que acceder a this dentro de la función. Es decir, this es el elemento del DOM. Y el evento se recibe como primer argumento en la función. Aquí otro ejemplo:
// Obtener referencia a botón
// Recuerda: el numeral o # indica id
const boton = document.querySelector("#miBoton");
// Agregar listener
boton.addEventListener("click", function (evento) {
// Aquí todo el código que se ejecuta cuando se da click al botón
// El evento del click
console.log("El evento es: ", evento);
// Para acceder al botón usamos this
// Por ejemplo cambiemos el texto
this.innerText = "Se cambia";
});Con this podemos acceder o cambiar propiedades del botón, es decir, tenemos todo el elemento del DOM.
Escuchar click de muchos botones
Para eso definimos una función que será llamada en el click de cada botón, luego de ello la agregamos en el listener de cada botón.
La manera de recuperar los botones es a través de querySelectorAll, lo cual devuelve un arreglo o array con elementos del DOM. Lo recorremos y en cada iteración le agregamos el listener.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Escuchar click de botones</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="botones">Soy un botón</button>
<br><br>
<button class="botones">Otro botón</button>
<br><br>
<button class="botones">Botón 3</button>
<br><br>
<button class="botones">Botón 4</button>
<br><br>
<button class="botones">Botón 5</button>
<br><br>
<button class="botones">Último botón</button>
<br><br>
<script src="script.js"></script>
</body>
</html>// Obtener referencia a botones
// Recuerda: el punto . indica clases
const botones = document.querySelectorAll(".botones");
// Definir función y evitar definirla de manera anónima
const cuandoSeHaceClick = function (evento) {
// Recuerda, this es el elemento
console.log("El texto que tiene es: ", this.innerText);
// Podemos cambiar cualquier cosa, p.ej. el estilo
this.style.borderColor = "blue";
}
// botones es un arreglo así que lo recorremos
botones.forEach(boton => {
//Agregar listener
boton.addEventListener("click", cuandoSeHaceClick);
});Para ejemplificar, se cambia el borde de cada botón y en la consola se imprime el texto que tiene. Así, a cada botón que clickeado se marcará con un borde azul.
Escuchar click de otros elementos con JavaScript
En este caso solamente lo hicimos con botones pero podríamos hacerlo con otros elementos como un div o párrafo; en ese caso solamente cambiaríamos el selector.
Más información sobre los selectores CSS.
Aprender más sobre JavaScript.
