如何让我的 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();
}