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