Codigo
function asignarEventos() {
var uno = document.getElementById("uno");
var dos = document.getElementById("dos");
var tres = document.getElementById("tres");
var arreglo = [uno, dos, tres];
for (var i = 0; i < arreglo.length; i++) {
var elemento = arreglo[i];
var texto = elemento.innerHTML.trim();
elemento.onclick = function(){
alert(texto);
};
}
}
asignarEventos();
<html>
<head>
</head>
<body>
<a id="uno">
Uno
</a>
<a id="dos">
Dos
</a>
<a id="tres">
Tres
</a>
</body>
</html>
Objetivo
La variable arreglo
contiene un listado de elementos HTML, que se obtienen previamente usando document.getElementById()
. Posteriormente quiero asignar de una manera dinamica un evento al elemento HTML usando la propiedad .onclick
de los DOM Element.
Lo que quiero es que al dar click sobre alguno de los elementos <a>
, se muestre un alert()
o bien se ejecute una funcion mostrando el texto contenido en ellos.
Problema
En esta seccion del codigo:
var elemento = arreglo[i];
var texto = elemento.innerHTML.trim();
elemento.onclick = function(){
alert(texto);
};
Obtengo el elemento contenido en la variable arreglo
, y posteriormente obtengo su valor innerHTML
, es decir, el texto que el contiene, luego asigno el atributo onclick
asignando una funcion anonima que ejecutara un alert()
mostrando el texto que contiene el elemento HTML.
Pero al hacer click sobre cualquiera de los elementos siempre se imprime el innerHTML
del ultimo de los elementos, en este caso es la palabra "tres". Cuando deberia ser el valor de cada elemento individualmente.
Pregunta
Como se puede asignar un evento onClick()
a un elemento obtenido con document.getElementById()
?
Nota
Cabe aclarar que el problema lo debo solucionar usando JavaScript puro, no me sirve usar una libreria como jQuery u otros, ya que en dicho entorno no puedo hacer uso de ella.