How do I get my JavaScript to read the HTML within my function?

Question

I am making a pokedex to practice more JavaScript and linking to APIs, but I have run into an issue with.innerHTML. I am putting the HTML within the JavaScript function for the inner html to relay it to my site, but it is not registering with the JavaScript and says it is undefined.

Here is the code:

document.querySelector("#search").addEventListener("click", getPokemon);
function getPokemon (e) {
   const name = document.querySelector(".pokemonName").value;
   const image = document.querySelector(".pokemonBox").value;
   console.log(name);
 fetch(`https://pokeapi.co/api/v2/pokemon/${name}`)
    .then(response => response.json())
    .then((data) => {
        
   
   
   image.innerHTML = `
   <div class="image-container"> <img class="image" src="${data.sprites.other["official- 
    artwork"].front_default}" alt="pokemon"/> 
   </div>
   <div class="name-container"> <p class="name"> Name: ${data.name} </p> <p></p></div>
   ` ;
   
   document.querySelector('.type').innerHTML = data.types.map(type => type.type.name);
}).catch((err) => {
    console.log('pokemon not found', err);
});
e.preventDefault();
}

Answer 1

Is it the image.innerHTML that is undefined? Would need to see the html to be sure but at a guess if the const image = document.querySelector(".pokemonBox").value; is some sort of container for the innerHTML to be inserted into, you do not want the '.value' as this likely does not exist.

You also need to return the promises, or use the newer syntax, for example:

//I broke the function down to improve readability and separate concerns as you may wish to use the fetchPokemon call elsewhere in your app in the future so this would allow code reuse
const fetchPokemon = async (name) {
   let name = name;
   const pokemonData = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`)
   const pokemonJson = await pokemonData.json();
   console.log(pokemonJson);
   return pokemonJson;
}
const setImageInner = async (e) => {
   const name = document.querySelector(".pokemonName").value;
   const image = document.querySelector(".pokemonBox");
   console.log(name);
   const jsonData = await fetchPokemon(name)
   // you can now use jsonData directly
   image.innerHTML = `<div class="image-container"><img class="image" src="${jsonData.sprites.other.official-artwork.front_default}" alt="pokemon"/></div>`
  //etc... you get the idea

Note where you have used <img class="image" src="${data.sprites.other["official-artwork"].front_default}" alt="pokemon"/> according to the api documentation...sprites.other is an object (note the {}) with 3 keys so you would access via <img class="image" src="${data.sprites.other.official-artwork.front_default}" alt="pokemon"/>

Also where you have Name: ${data.name} do you mean to use your const labelled name ( const name = document.querySelector(".pokemonName").value; or the name from the api, I ask because looking at the API there is no name key at the endpoint https://pokeapi.co/api/v2/pokemon/${name} , instead it is under the species object so you would need ${jsonData.species.name} if using the above example that I gave.

Answer 2

It will be because you did not put the plus sign in "image.innerHTML"