Obtener el ID del botón clickeado usando Onclick - JavaScript

En el desarrollo web, a menudo necesitamos obtener la información del botón que se ha clickeado, ya sea para procesar un formulario, enviar datos a la base de datos o simplemente para manipular la página de alguna manera. En JavaScript, podemos usar el evento onclick para capturar el clic de un botón. En este artículo, explicaremos cómo obtener el ID del botón clickeado usando este evento.

Capturando el evento onclick

Para empezar, debemos agregar un atributo onclick a nuestro botón. Aquí es donde capturaremos el evento clic para poder procesar la información posteriormente.

Por ejemplo:

<button id="myButton" onclick="getButtonId()">Haz click aquí</button>

Obteniendo el ID en JavaScript

Ahora que hemos agregado el atributo onclick a nuestro botón, podemos comenzar a escribir nuestra función getButtonId() en JavaScript. El objetivo de esta función es obtener el ID del botón clickeado y hacer algo con él.

Podemos hacer esto utilizando el objeto event de JavaScript, que es creado automáticamente cada vez que se produce un evento. En este caso, estamos interesados en su propiedad target.id, que devuelve el ID del elemento que ha sido clickeado:

function getButtonId(event) {
 console.log(event.target.id); // Imprime el ID del botón clickeado en la consola
}

Ejemplos de código y comandos

A continuación presentamos algunos ejemplos para poner en práctica lo que hemos aprendido:

<button id="myButton1" onclick="getButtonId()">Botón 1</button>
<button id="myButton2" onclick="getButtonId()">Botón 2</button>
<button id="myButton3" onclick="getButtonId()">Botón 3</button>

//La funcion getButtonId() quedaria de la siguiente manera:
function getButtonId(event) {
 console.log(event.target.id);
}

En este ejemplo, hemos creado tres botones con diferentes IDs y hemos asignado la función getButtonId() a su evento onclick. Al hacer clic en cada botón, se imprimirá su ID en la consola del navegador.

Conclusión

Hemos aprendido cómo obtener el ID de un botón clickeado utilizando el evento onclick en JavaScript. Este conocimiento puede ser muy útil en situaciones en las que necesitamos procesar información del usuario de forma dinámica. Esperamos que hayas encontrado útil este artículo.

Preguntas frecuentes

¿Puedo obtener el ID de cualquier elemento HTML?

Sí, puedes usar esta técnica para obtener el ID de cualquier elemento HTML, siempre y cuando agregues el atributo onclick y captures el evento en JavaScript.

¿Puedo hacer algo más con el ID del botón?

Sí, puedes usar el ID del botón para realizar otras acciones, como cambiar su estilo, animarlo o procesar información específica relacionada con ese botón.

¿Puedo usar otras propiedades del objeto event para obtener información adicional?

Sí, el objeto event tiene muchas propiedades útiles que pueden ayudarte a obtener más información sobre el evento, como la posición del cursor del mouse o las teclas que se presionaron en el teclado.

¿Puedo obtener el ID de un botón de forma programática en lugar de usando el evento onclick?

Sí, puedes obtener el ID de un botón usando JavaScript de varias maneras diferentes, como usando el método document.getElementById() o jQuery. Sin embargo, el método onclick es una forma rápida y sencilla de obtener el ID del botón al hacer clic en él.

Cómo utilizar nombres de variables dinámicos en JavaScript

Cómo verificar si una variable es nula o vacía en JavaScript

¿Qué es Date.now() en JavaScript?

¿Existe algún método para eliminar valores "undefined" de una matriz en JavaScript?

Agrupando un arreglo de objetos en JavaScript

JavaScript Wait for Page to Load

Cómo convertir una cadena de texto en un objeto en JavaScript

Cómo detener la llamada setInterval en JavaScript

Cómo marcar/desmarcar la casilla de verificación utilizando JavaScript