3

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.

5
  • 1
    te recomiendo que heches un vistazo a esto: api.jquery.com/on
    – user9099
    Commented el 4 nov. 2016 a las 11:00
  • Gracias por tu aporte, pero no puedo usar librerias de js
    – F. Juarez
    Commented el 4 nov. 2016 a las 11:02
  • 2
    @AlbertoMier No es necesario usar una librería entera para una sola utilidad. Es verdad que JQuery te ahorra mucho tiempo algunas veces pero hay que mirar también por intentar disminuir recursos :) Commented el 4 nov. 2016 a las 11:16
  • 2
    Posible duplicado de Obtener el valor de un elemento "a" desde jQuery Commented el 4 nov. 2016 a las 11:39
  • 1
    @aldanux Realmente no sé si sería un duplicado exacto de esta pregunta. En esta específicamente hace referencia solamente a Javascript y en la otra solicita respuestas de JQuery. Sin embargo, si que es verdad que las respuestas que le dan están en javascript puro. Commented el 4 nov. 2016 a las 12:27

3 respuestas 3

8

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>

3
  • Sabía que esto se podía hacer y lo he buscado pero no sabía como y por eso he puesto la más rápida y sencilla. Muy buena tu respuesta :) Commented el 4 nov. 2016 a las 13:30
  • Yo prefiero esta opcion igual. El codigo es mucho mas claro cuando se separa javascript del html.
    – Fiambre
    Commented el 4 nov. 2016 a las 18:48
  • muy buena respuesta heheh yo fui a lo rapido xD
    – lois6b
    Commented el 8 nov. 2016 a las 7:03
3

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>

3
  • woo gano con 6 segundos de diferencia muahahah xD yo pasaria this solo, aunque esté buscando el id porque con this puede sacar mucha mas informacion si se necesitase.
    – lois6b
    Commented el 4 nov. 2016 a las 11:05
  • 1
    @lois6b Por una vez fuiste más rápido jajaja. Sí, podría pasar todo el elemento entero pero como en este caso especificaba que quería pasar el id por eso fui tan específico xD Commented el 4 nov. 2016 a las 11:11
  • 1
    asi es, se pedia el ID. Iba a responder, solo que 4 horas mas tarde, jejeje
    – chenio
    Commented el 4 nov. 2016 a las 15:40
2

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 idpor ejemplo

  
  function mandarId(elem){
    alert(elem.id);
    
    }
<button id="boton" onclick="mandarId(this)"> Click </button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.