0

intento consumir una api y quiero que imprima como lista del 0 al 100 pero solo me imprime un valor , que estoy haciendo mal? , intenté haciendolo en unos div y cambiando de lado el bucle for pero me lanza lo mismo siempre

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="contenido"></div>


    <script>
        var contenido = document.querySelector('#contenido')
        fetch('https://pokeapi.co/api/v2/pokemon')
        .then(res=>res.json())
        .then(data=>{
            var i = 0;
            console.log(data.results['0'])
            for(i=0;i<=100;i++){toString(i)
                contenido.innerHTML=`
                <ol>
                    <li>
                        ${data.results[i].name}

                    </li>
                    
                </ol>

            
            `}

        })
    </script>
    
</body>
</html>

1 respuesta 1

1

solo tienes que poner el signo mas al innerHTML para que agregue asi:

contenido.innerHTML+=`
                <ol>
                    <li>
                        ${data.results[i].name}

                    </li>
                    
                </ol>

            
            `

y para que te lo enumere correctamente seria asi

<body>
    <div id="contenido">
      <ol>

      </ol>
    </div>


    <script>
        var contenido = document.querySelector('#contenido ol')
        fetch('https://pokeapi.co/api/v2/pokemon')
        .then(res=>res.json())
        .then(data=>{
            var i = 0;
            console.log(data.results['0'])
            for(i=0;i<=100;i++){toString(i)
                contenido.innerHTML+=`
                
                    <li>
                        ${data.results[i].name}

                    </li>
                    
                

            
            `}

        })
    </script>
    
</body>

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.