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.

Francisco Romero
  • 16,194
  • 5
  • 30
  • 61
F. Juarez
  • 79
  • 1
  • 1
  • 5
  • 1
    te recomiendo que heches un vistazo a esto: http://api.jquery.com/on/ –  Nov 04 '16 at 11:00
  • Gracias por tu aporte, pero no puedo usar librerias de js – F. Juarez Nov 04 '16 at 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 :) – Francisco Romero Nov 04 '16 at 11:16
  • 2
    Posible duplicado de [Obtener el valor de un elemento "a" desde jQuery](http://es.stackoverflow.com/questions/19569/obtener-el-valor-de-un-elemento-a-desde-jquery) – Black Sheep Nov 04 '16 at 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. – Francisco Romero Nov 04 '16 at 12:27

3 Answers3

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>
rnrneverdies
  • 16,491
  • 3
  • 49
  • 79
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>
Francisco Romero
  • 16,194
  • 5
  • 30
  • 61
  • 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 Nov 04 '16 at 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 – Francisco Romero Nov 04 '16 at 11:11
  • 1
    asi es, se pedia el ID. Iba a responder, solo que 4 horas mas tarde, jejeje – chenio Nov 04 '16 at 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>
lois6b
  • 7,419
  • 5
  • 29
  • 50