0

My script is at the end of the body, which has been the basic answer I've seen given when searching for a solution. What am I doing wrong? Do I need to use async/await? I've written almost this exact code before, and its worked.

HTML:

    <!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body id="body">
    <h1 id="header">Pokemon</h1>
    <div id="main-container">

    </div>
    <button id="button">Click</button>
    <script type="text/javascript" src="ajax.js"></script>
</body>
</html>

JS:

let pokemon = document.querySelectorAll('.poke');
let button = document.getElementById('button');
let container = document.getElementById('main-container');


function loadPokemon() {
    const urs = 'https://pokeapi.co/api/v2/pokemon';
    let xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if(xhr.status === 200) {
            const poke = JSON.parse(xhr.responseText)
            container.innerHTML+= `
            ${poke.results.map(function(pok, index) {
                return `
                <div class='poke'>
                    <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${(index + 1).toString()}.png">
                    </img>
                    ${pok.name}
                </div>
                `
            })}
            `
        }
    }
    xhr.open('GET', urs, true);
    xhr.send();
};


button.addEventListener('click', loadPokemon);
Adag89
  • 151
  • 8
  • Execute your code after document is loaded, [Read More](https://stackoverflow.com/a/800010/11719787) – Sameer Jan 22 '20 at 04:13

2 Answers2

0

It is working here.. I did not make any changes to your code

let pokemon = document.querySelectorAll('.poke');
let button = document.getElementById('button');
let container = document.getElementById('main-container');


function loadPokemon() {
    const urs = 'https://pokeapi.co/api/v2/pokemon';
    let xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if(xhr.status === 200) {
            const poke = JSON.parse(xhr.responseText)
            container.innerHTML+= `
            ${poke.results.map(function(pok, index) {
                return `
                <div class='poke'>
                    <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${(index + 1).toString()}.png">
                    </img>
                    ${pok.name}
                </div>
                `
            })}
            `
        }
    }
    xhr.open('GET', urs, true);
    xhr.send();
};


button.addEventListener('click', loadPokemon);
   <!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body id="body">
    <h1 id="header">Pokemon</h1>
    <div id="main-container">

    </div>
    <button id="button">Click</button>
    <script type="text/javascript" src="ajax.js"></script>
</body>
</html>
Mohamed Farouk
  • 1,018
  • 5
  • 10
0

Your code is working fine. Are you sure you copy and pasted the exact code?

MeetuU
  • 156
  • 1
  • 10