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