如何让我的 JavaScript 在我的函数中读取 HTML？

我正在制作一个 pokedex 来练习更多的 JavaScript 并链接到 API，但我遇到了 .innerHTML 的问题。我将 HTML 放在 JavaScript 函数中，以便内部 html 将其中继到我的站点，但它没有注册 JavaScript 并说它是未定义的。

这是代码：

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

}