brickbones/pokeapi-script.js

Hello,

I am using visual studio, and have been following your YT tutorial on this, however I am getting an error.
Error: TypeError: Cannot set property 'innerHTML' of null
at generateHtml (pokemon.js:33)
at pokemon.js:18

I assure you, the code is typed as you have, and even tried copy and pasting your code directly from here, but it still does not work.
Can you help?

Can you share your code? @ConnorDEllement

@brickbones I had the same problem. I copied your pokeapi-script.js code and got the following:

main_test.js:19 Error: TypeError: Cannot set property 'innerHTML' of null
at generateHtml (main_test.js:33)
at main_test.js:18

@brickbones I had the same problem. I copied your pokeapi-script.js code and got the following:

main_test.js:19 Error: TypeError: Cannot set property 'innerHTML' of null
at generateHtml (main_test.js:33)
at main_test.js:18

const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '25',
}

const {url, type, id} = apiData
const apiUrl = ${url}${type}/${id}

fetch(apiUrl)
.then( (data) => data.json())
.then( (pokemon) => generateHtml(pokemon) )

const generateHtml = (data) => {
console.log(data)
const html = <div class="name">${data.name}</div> <img src=${data.sprites.front_default}> <div class="details"> <span>Height: ${data.height}</span> <span>Weight: ${data.weight}</span> </div>
const pokemonDiv = document.querySelector('.pokemon')
pokemonDiv.innerHTML = html
}

Hi,
You need to add a html file with a class of pokemon. Then it will generate pikachu data inside the div.
Link this js file in html.

const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '25',
}

const {url, type, id} = apiData

const apiUrl = ${url}${type}/${id}

const generateHtml = (data) => {
console.log(data)
const html = <div class="name">${data.name}</div> <img src=${data.sprites.front_default}> <div class="details"> <span>Height: ${data.height}</span> <span>Weight: ${data.weight}</span> </div>
const pokemonDiv = document.querySelector('.pokemon');
console.log(pokemonDiv);
pokemonDiv.innerHTML = html;
}

fetch(apiUrl)
.then( (data) => {
if(data.ok){
return data.json()
}
throw new Error('Response not ok.');
})
.then( pokemon => generateHtml(pokemon))
.catch( error => console.error('Error:', error))

https://www.youtube.com/watch?v=tFVdxGgJPCo

Watch this video

Hello, I've been following the tutorials and really like it, but i want to improve a little bit from how i would like to use the API,

from the tutorial, it shows pokemon depends on static id written inside the code, but i would like to make the pokemon change every couple second, my idea is to loop through the id object from the api, but i don't know how to code it, would anyone help me with this? Regards

Hello, if some one want to copy this project + search field here you are

HTML

<title>Search Pokemons</title> <script src="apiPoke.js"></script>

JavaScript

function srchPoke(){
const pokeID = document.getElementById("number").value;
//alert(pokeID)
const apiPokeData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
//id: 55,
}
const {url, type,} = apiPokeData
const apiUrl = ${url}${type}/
const finalApiUrl = apiUrl+pokeID

//console.log(pokeID)

fetch(finalApiUrl)
.then( (data) => {
if(data.ok){
return data.json()
}
throw new Error('Response not ok.');
})
.then( pokemon => generateHtml(pokemon))
.catch( error => console.error('Error:', error))

const generateHtml = (data) => {
console.log(data)
const html = <div class="name">${data.name}</div> <img src=${data.sprites.front_default}> <div class="details"> <span>Height: ${data.height}</span> <span>Weight: ${data.weight}</span> </div>
const pokemonDiv = document.querySelector('.pokemon')
pokemonDiv.innerHTML = html
}

hi nice job
but the html variable will bring up an error its rather nice if you use a different variable name and also the closing curry bracket is missing