0

Haciendo una pequeña prueba hice este código:

arr = ["item", "item2", "item3"]

var li = document.createElement("li")

arr.forEach(item =>{
    
    li.textContent = item 
    
           console.log(li)
})

El resultado que esperaba en la consola era dicha etiqueta li con el contenido actual del recorrido del bucle, las veces que este se repite(3), o sea, <li>ítem</li> , <li>item2</li> y <li>item3</li>, pero resulta que me lanzó solamente el contenido del último elemento del Array, o sea,<li>item3</li> las 3 veces del recorrido y sé que es porque no estoy incluyendo el createElement dentro del forEach pero... Quiero saber ¿por qué sucede esto así dejando el createElement fuera? introducir la descripción de la imagen aquí

3
  • 3
    No se que estas probando ni donde. Pero aca se ve bien
    – gbianchi
    Commented el 26 jul. 2021 a las 21:54
  • Con el código que pusiste el resultado es correcto, cada elemento aparece en la consola. ¿Tu código real es como este? Puede haber gran diferencia si involucras promesas.
    – Triby
    Commented el 27 jul. 2021 a las 19:50
  • El código es exactamente el mismo, lo copié, y el resultado es así como en la imagen, me devuelve la etiqueta li con el contenido del último elemento del Array las 3 veces
    – Kingsman10
    Commented el 27 jul. 2021 a las 21:41

1 respuesta 1

3


EDIT

El problema, es que al hacer un console.log de un objeto, no está mostrando el estado del objeto en ese momento en concreto (como si lo hace la herramienta de esta web), si no un "enlace" a ese objeto, de manera que al abrir su contenido mostrará los valores del estado actual.
Si muestras una propiedad en concreto, si mostrará el valor en ese momento.
Por ejemplo:

arr = ["item", "item2", "item3"]
var li = document.createElement("li")
arr.forEach(item =>{
  li.textContent = item 
  console.log(li, li.textContent)
})

Si lo pruebas, veràs que la propiedad li.textContent la muestra correctamente, pero li es un enlace al objeto, de manera que mostrará el estado actual.
EDIT 2
Otro tema es el funcionamiento del navegador a la hora de mostrar la información. Por ejemplo,si después del console.log pones un window.prompt para parar la ejecución (solo firefox, en los otros no mostrará el log hasta finalizar el bucle) y poder ver la salida antes de terminar el bucle, si pulsas el enlace cargará el valor en ese momento, y quedará guardado en el log, pero si no pulsas y lo haces luego, mostrará el último en los tres enlaces.
Resumiendo, no muestres objetos por log, muestra sus propiedades.

15
  • si bro, solo he creado un elemento pero en ese caso deberia pintarse por consola solo una vez el resultado no? o como es? soy novato en esto recien estoy comenzando a escribir codigo
    – Kingsman10
    Commented el 27 jul. 2021 a las 1:32
  • segun yo supongo que el loop pasa todos los elemntos del array automatico al ultimo ya que el li es uno solo pero tambien pienso que en ese caso debe pintarse por consola un solo resultado, porque me tira 3? esa es mi duda
    – Kingsman10
    Commented el 27 jul. 2021 a las 1:35
  • Aunque solo hagas un objeto, el bucle itera 3 veces, así que, como el console.log está dentro el bucle, lo ejecutará 3 veces, mostrando la información de ese único objeto, con sus diferentes valores, que varia en cada iteración. Al final se queda con el último que se le ha asignado. El texto del li primero vale "item1" y lo muestra por consola, después lo cambias por "item2" y lo muestra por consola, y luego, en su ultima iteracion, lo vuelve a cambiar por "item3", lo vuelve a mostrar, y sale del bucle. Commented el 27 jul. 2021 a las 2:01
  • aah ya, exacto, ahora creo entender, a eso me referia yo al principio, que el console deberia mostrar los 3 diferentes valores en cada iteracion, asi como dices que primero vale "item1" luego "item2" e "item3" pero solamente muestra "item3" las 3 veces y segun lo que entiendo supongo que el bucle en la primera pasada le asigna todos los elementos quedando en el ultimo y lo pasa por consola las 3 veces que deberia correr el ciclo? corrigeme si me equivoco porfa, creo que no tiene mucho sentido nose
    – Kingsman10
    Commented el 27 jul. 2021 a las 2:51
  • Si el console.log lo pones fuera del bucle, si, solo mostraría el último, pero en el ejemplo que pones, está dentro, y muestra los tres valores, como indica @gbianchi en el comentario. Commented el 27 jul. 2021 a las 15:20

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.