9

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.

4 respuestas 4

8

El problema ocurre por problemas de ámbito/scope. Recuerda:

Una variable declarada con var siempre tiene un scope de función o un scope global. Toda variable declarada dentro de una función, sea o no dentro de un bloque o estructura, siempre aplica a hoisting.

Ejemplo hosting

// ES5
(function() {
  for (var i = 0; i < 3; i++) {
    var x = i;
  }
  console.log(x);
})();

// ES6
(() => {
  for (let i = 0; i < 3; i++) {
    let y = i;
  }
  console.log(y); // error
})();

Como puedes darte cuenta, en el primer ejemplo, x sigue estando disponible aún fuera del loop for, esto sucede porque las variables ES5 sufren un proceso distinto cuando son declaradas; esto no sucede en ES6 con let y const.

En tu código, la variable texto, al ser de ámbito de función, siempre guarda la última referencia que se le asigne, es decir, el texto del último elemento del arreglo. Lo que debes hacer es usar un closure o usar let o const.

function asignarEventos() {
  var arreglo = Array.from(document.querySelectorAll('a[id]'));

  for (var i = 0; i < arreglo.length; i++) {
    var elemento = arreglo[i];
    const texto = elemento.innerHTML.trim();
    elemento.onclick = function() {
      alert(texto);
    };
  }
}

asignarEventos();
<body>
  <a id="uno">
    Uno
  </a>
  <a id="dos">
    Dos
  </a>
  <a id="tres">
    Tres
  </a>
</body>

6

Por cada iteracion que hace el for se escribe el valor de la variable texto. Intenta accediendo al elemento en si con this y asi leer el contenido:

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];
    
    elemento.onclick = function(){
      alert(this.innerHTML.trim());
    };

  }

}

asignarEventos();
<html>

<head>
</head>

<body>

  <a id="uno">
    Uno
  </a>

  <a id="dos">
    Dos
  </a>

  <a id="tres">
    Tres
  </a>

</body>

</html>

2
  • Si me permites la sugerencia, quita la linea var texto = elemento.innerHTML.trim();. Muy buena respuesta. Es la misma que estaba preparando, pero te me adelantaste :-) Commented el 1 ago. 2017 a las 13:34
  • Podrías simplificar el código si usases var arreglo = document.querySelectorAll("#uno, #dos, #tres") o también quitando la asignación de elemento para hacer onclick (o addEventListener) directamente a arreglo[i]
    – Alvaro Montoro
    Commented el 1 ago. 2017 a las 13:43
4

Utilizando un Closure:

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];

  elemento.onclick = function(elem){
	return function(){
	   alert(elem.innerHTML.trim());
	}
  }(elemento);

  }

}

asignarEventos();
<html>

<body load="">

  <a id="uno">
Uno
  </a>

  <a id="dos">
Dos
  </a>

  <a id="tres">
Tres
  </a>

</body>

</html>

¿ Por qué no funciona el código original ?

La funcion que has definido para el evento onClick lee el valor de la variable externa texto en tiempo de ejecucion, en lugar de copiar su valor cuando la función es definida. Cualquier modificacion ulterior de la variable externa afecta la ejecucion de la función.

3

Prueba mostrar el texto con un this así:

...

for (var i = 0; i < arreglo.length; i++) {

    var elemento = arreglo[i];

    elemento.onclick = function(){
      alert(this.innerHTML.trim());
    };

  }

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.