A veces, un desarrollador tiene que saber el ID del botón en el que el usuario ha hecho clic para decidir el curso de acción adicional en una página web. Como verá en este artículo, esto se puede hacer a través de Vanilla JavaScript y jQuery. Vamos a empezar:
Primero, crearemos una página web HTML simple que tiene dos botones en el centro de la página:
DOCTIPO html >
< html >
< cuerpo >
< centro >
< división estilo = 'margen superior: 50px;' >
< h2 > Haga clic en uno de los siguientes botones h2 >
< botón identificación = 'boton_uno' estilo = 'ancho: 100 px; alto: 40 px; margen derecho: 10 px;' > 1 botón >
< botón identificación = 'boton_dos' estilo = 'ancho: 100 px; alto: 40 px;' > 2 botón >
división >
centro >
cuerpo >
html >
¿Cómo obtener la identificación del botón en el que se hizo clic usando JavaScript?
Podemos obtener la ID del botón en el que se hizo clic usando JavaScript en varios métodos diferentes. En nuestro primer método, obtendremos la lista de nodos de todas las etiquetas de botón y las almacenaremos dentro de una variable. Luego iteraremos sobre la lista de nodos para obtener la ID del botón en el que se ha hecho clic:
< guion >
var botones = documento.getElementsByTagName ( 'botón' ) ;
por ( dejar índice = 0 ; índice < botones.longitud; índice++ ) {
botones [ índice ] .onclick = función ( ) {
alerta ( this.id ) ;
}
}
guion >
También podemos configurar cada botón con al hacer clic evento individualmente:
DOCTIPO html >
< html >
< cuerpo >
< centro >
< división estilo = 'margen superior: 50px;' >
< h2 > Haga clic en uno de los siguientes botones h2 >
< botón identificación = 'boton_uno' estilo = 'ancho: 100 px; alto: 40 px; margen derecho: 10 px;' al hacer clic = 'alertId(este.id)' > 1 botón >
< botón identificación = 'boton_dos' estilo = 'ancho: 100 px; altura: 40 px;' al hacer clic = 'alertId(este.id)' > 2 botón >
división >
centro >
cuerpo >
< guion >
función ID de alerta ( identificación ) {
alerta ( identificación )
}
guion >
html >
¿Cómo obtener la identificación del botón en el que se hizo clic usando jQuery?
jQuery también tiene varios métodos diferentes que se pueden usar para obtener la ID de un botón en el que se hizo clic. Empezaremos con el hacer clic() método que se aplica en un selector y toma un nombre de función como argumento opcional:
DOCTIPO html >
< html >
< cuerpo >
< centro >
< división estilo = 'margen superior: 50px;' >
< h2 > Haga clic en uno de los siguientes botones h2 >
< botón identificación = 'boton_uno' estilo = 'ancho: 100 px; alto: 40 px; margen derecho: 10 px;' al hacer clic = 'alertId(este.id)' > 1 botón >
< botón identificación = 'boton_dos' estilo = 'ancho: 100 px; alto: 40 px;' al hacer clic = 'alertId(este.id)' > 2 botón >
división >
centro >
cuerpo >
< guion >
$ ( 'botón' ) .hacer clic ( ID de alerta ( $ ( este ) .attr ( 'identificación' ) ) ) ;
función ID de alerta ( identificación ) {
alerta ( identificación )
}
guion >
html >
También podemos usar el en() método para adjuntar controladores de eventos a los elementos. los en() El método toma al menos un evento como argumento junto con otros argumentos opcionales:
< html >
< cuerpo >
< centro >
< división estilo = 'margen superior: 50px;' >
< h2 > Haga clic en uno de los siguientes botones h2 >
< botón identificación = 'boton_uno' estilo = 'ancho: 100 px; alto: 40 px; margen derecho: 10 px;' al hacer clic = 'alertId(este.id)' > 1 botón >
< botón identificación = 'boton_dos' estilo = 'ancho: 100 px; altura: 40 px;' al hacer clic = 'alertId(este.id)' > 2 botón >
división >
centro >
cuerpo >
< guion >
$ ( 'botón' ) .en ( 'hacer clic' , ID de alerta ( $ ( este ) .attr ( 'identificación' ) ) ) ;
función ID de alerta ( identificación ) {
alerta ( identificación )
}
guion >
html >
Conclusión
Se puede acceder a la ID de un botón en el que se hizo clic a través de JavaScript simple y jQuery. Discutimos cuatro de estos métodos y brindamos detalles en profundidad y ejemplos relevantes en este artículo.