mi duda es si puedo mandar el id de una etiqueta en html junto con el mismo evento que lo ejecuta, por ejemplo:
<button id="boton" onclick="mandarId()">
y que al suceder el evento mande el id de la etiqueta tambien.
mi duda es si puedo mandar el id de una etiqueta en html junto con el mismo evento que lo ejecuta, por ejemplo:
<button id="boton" onclick="mandarId()">
y que al suceder el evento mande el id de la etiqueta tambien.
Otra opcion, considerada una mejor practica, es utilizar javascript no obstructivo (Unobtrusive JavaScript) que implica, entre otras cosas, separar la presentacion de funcionalidad.
Se trata de enlazar el evento desde javascript y no desde el HTML, con la ventaja (entre otras) de que siempre recibes el evento, en lugar de tener que estar pasando parametros. Como el evento tiene la informacion de quien recibio el mismo, esto puede aprovecharse para, por ejemplo, reutilizar manejadores (callbacks).
En el siguiente ejemplo, suponemos que tienes varios botones y dependiendo del ID quieres hacer una cosa u otra. Podrias hacer lo siguiente:
// esta es la funcion que invocan todos los botones
function manejadorCallback(evento) {
// cada vez que clickas un boton. Automaticamente se invoca con un parametro
// que es el Evento. el cual tiene una propiedad (entre otras) llamada target
// que es el elemento que dispara el evento. Luego buscas el id en target.
alert(evento.target.id);
}
// aqui el javascript no obstructivo.
// obtenemos todos los botones, por su clase
var buttons = document.querySelectorAll('.miboton')
// a cada uno le asignamos el manejador del evento.
for(var i = 0; i < buttons.length; i++) {
// aqui generas el equivalente a onclick
buttons[i].addEventListener('click', manejadorCallback);
}
<button id="elid" class="miboton">Presiona</button>
<button id="otroid" class="miboton">Presiona</button>
<button id="masIds" class="miboton">Presiona</button>
Lo puedes hacer pasándole this.id
en la función, donde this
hace referencia al objeto al que le estás haciendo click.
function mandarId(id){
alert(id);
}
<button id="boton" onclick="mandarId(this.id)">click aquí </button>
this
solo, aunque esté buscando el id
porque con this
puede sacar mucha mas informacion si se necesitase.
Si pasas como parametro, this
estás pasando la información de aquello a lo que llama la funcion (en este caso el boton) para asi poder obtener su id
por ejemplo
function mandarId(elem){
alert(elem.id);
}
<button id="boton" onclick="mandarId(this)"> Click </button>