1

Obtengo los elemenentos con la clase 'link', pero me devuelve undefined cuando los recorro con for of, por qué?

window.addEventListener('DOMContentLoaded',() => {
var elementos = document.getElementsByClassName('link');
  
for(var j of elementos) { console.log(elementos[j]) }

});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <a href='link1' class="link"></a>
    <a href='link2' class="link"></a>
    <a href='link3' class="link"></a>
</body>
</html>

3 respuestas 3

3

Estás haciendo mal uso del for...of.

La sentencia for...of crea un bucle que itera a través de los elementos de objetos iterables (incluyendo Array, Map, Set, el objeto arguments, etc.), ejecutando las sentencias de cada iteración con el valor del elemento que corresponda.

window.addEventListener('DOMContentLoaded',() => {
var elementos = document.getElementsByClassName('link');
  
for(var j of elementos) {
  console.log(j);
}

});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <a href='link1' class="link"></a>
    <a href='link2' class="link"></a>
    <a href='link3' class="link"></a>
</body>
</html>


Referencia:

2

Si usas for (var elem of iterable) {...}, elem no es el identificador, sino el elemento. Te estás confundiendo con for (var i in object) {...}

window.addEventListener('DOMContentLoaded',() => {
  var elementos = document.getElementsByClassName('link');
  for(var j of elementos) { 
    console.log(j);
  }
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <a href='link1' class="link"></a>
    <a href='link2' class="link"></a>
    <a href='link3' class="link"></a>
</body>
</html>

1

La instrucción es for ... in no for ... of:

window.addEventListener('DOMContentLoaded',() => {
var elementos = document.getElementsByClassName('link');
  
for(var j in elementos) { console.log(elementos[j]) }

});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <a href='link1' class="link"></a>
    <a href='link2' class="link"></a>
    <a href='link3' class="link"></a>
</body>
</html>

1
  • No creo que sea así, porque hay una respuesta algo parecido en la comunidad de habla inglesa, que dice que no debe usarse for/in(la respuesta mas votada) stackoverflow.com/questions/22754315/… , sino corrigeme
    – ESCM
    el 25 sep. 2017 a las 16:30

Tu Respuesta

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

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