Dado un conjunto de botones, la tarea es determinar la ID del botón cuando se hace clic en él usando JavaScript y jQuery.
Obtenga la ID del botón en el que se hizo clic usando JavaScript
Ejemplo 1: este ejemplo establece un evento onClick para cada botón, cuando se hace clic en el botón, la identificación del botón se pasa a la función y luego imprime la identificación en la pantalla.
<!DOCTYPE HTML> <html> <head> <title> Get the ID of the clicked button using JavaScript </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <button id="1" onClick="GFG_click(this.id)"> Button1 </button> <button id="2" onClick="GFG_click(this.id)"> Button2 </button> <button id="3" onClick="GFG_click(this.id)"> Button3 </button> <p id = "GFG_DOWN" style = "color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click on button to get ID"; function GFG_click(clicked) { el_down.innerHTML = "ID = "+clicked; } </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo establece un evento onClick en la etiqueta <script> individualmente para cada botón. Cuando se hace clic en el botón, la identificación del botón se pasa a la función y luego imprime la identificación en la pantalla.
<!DOCTYPE HTML> <html> <head> <title> Get the ID of the clicked button in JavaScript </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <button id="1">Button 1</button> <button id="2">Button 2</button> <button id="3">Button 3</button> <p id = "GFG_DOWN" style = "color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click on button to get ID"; document.getElementById('1').onclick = GFG_click; document.getElementById('2').onclick = GFG_click; document.getElementById('3').onclick = GFG_click; function GFG_click(clicked) { el_down.innerHTML = "Button clicked, id = " + this.id; } </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Obtenga la ID del botón en el que se hizo clic usando jQuery
Método jQuery on(): este método agrega uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios.
Sintaxis:
$(selector).on(event, childSelector, data, function, map)
Parámetros:
- evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para adjuntar a los elementos seleccionados. En el caso de múltiples valores de eventos, estos están separados por espacios. El evento debe ser válido.
- childSelector: este parámetro es opcional. Especifica que el controlador de eventos solo debe adjuntarse a los elementos secundarios definidos.
- datos: Este parámetro es opcional. Especifica los datos adicionales para pasar a la función.
- función: Este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento.
- map: especifica un mapa de eventos ({event:func(), event:func(), …}) que tiene uno o más eventos para agregar a los elementos seleccionados y funciones para ejecutar cuando ocurren los eventos.
Método jQuery click(): este método activa el evento de clic o agrega una función para que se ejecute cuando se produce un evento de clic. El evento de clic ocurre cuando se hace clic en un elemento.
Sintaxis:
- Active el evento de clic para los elementos seleccionados:
$(selector).click()
- Agrega una función al evento de clic:
$(selector).click(function)
Parámetros: este método acepta la función de parámetro único que es opcional. Especifica la función que se ejecutará cuando se produzca el evento de clic.
Ejemplo 1: este ejemplo establece un evento onClick usando el método click() para cada botón. Cuando se hace clic en el botón, la identificación del botón se pasa a la función y luego imprime la identificación en la pantalla.
<!DOCTYPE HTML> <html> <head> <title> Get the ID of the clicked button using jQuery </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <button id="1"> Button1</button> <button id="2"> Button2</button> <button id="3"> Button3</button> <p id = "GFG_DOWN" style = "color:green; font-size: 20px; font-weight: bold;"> </p> <script> $('#GFG_UP').text("Click on button to get ID"); $("button").click(function() { var t = $(this).attr('id'); $('#GFG_DOWN').text("ID = " + t); }); </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo establece un evento onClick usando el método on() para cada botón. Cuando se hace clic en el botón, la identificación del botón se pasa a la función y luego imprime la identificación en la pantalla.
<!DOCTYPE HTML> <html> <head> <title> Get the ID of the clicked button using jQuery </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <button id="1"> Button1</button> <button id="2"> Button2</button> <button id="3"> Button3</button> <p id = "GFG_DOWN" style = "color:green; font-size: 20px; font-weight: bold;"> </p> <script> $('#GFG_UP').text("Click on button to get ID"); $("button").on('click',function() { var t = (this.id); $('#GFG_DOWN').text("ID = " + t); }); </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA