Cannot read property 'innerHTML' of null error. My script is at the end of the body, why am I still getting this error?
Question
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);
2 answers
solution1
0 2020-01-22 04:16:17
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>solution2
0 2020-01-22 04:16:37
Your code is working fine. Are you sure you copy and pasted the exact code?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Cannot set property 'innerHTML' of null why am I getting this error
Why I am getting “cannot read property style of null” error?
Why am I getting “Uncaught TypeError: Cannot read property 'nodeName' of null” in my script?
Why am I getting “Cannot set property 'innerHTML' of null at ahint”
Why am I getting a “Cannot read property 'nodeType' of null” error with Knockout JS?
Why am I getting error 'Cannot read property 'name' of null' when using a parsed string?
Why am I getting TypeError: Cannot read property '0' of undefined error in google apps script?
why I am getting, cannot read property of undefined error?
"cannot read property 'innerHTML' of null" error
When attempting to authenticate with Email, I get an “Uncaught TypeError: Cannot read property 'value' of null” Error. Why?
Related Tags