对于学校，我正在使用 Pokemon API，我试图让人们可以输入 Pokemon 名称，它会向他们显示该 Pokemon，而不是我为他们选择的 Pokemon。html代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css"> <title> Pokemon </title> </head> <body> <script src="script2.js"></script> <h1>PokeDex</h1> <div id="poke_container" class="poke-container"></div> <div class="pokemon"> </div> </body></html>我现在得到的js代码是这样的：const apiData = {url: 'https://pokeapi.co/api/v2/',type: 'pokemon',id: 'ditto',}const {url, type, id} = apiDataconst apiUrl = `${url}${type}/${id}`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))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}这将显示一个同上，但我希望人们可以输入一些东西，它会显示那个神奇宝贝。
1 回答
翻阅古今
TA贡献1780条经验 获得超5个赞
尝试这个 ：
在您的 html 中，您需要为动态神奇宝贝名称添加一个输入字段。
<input type="text" id="pokemon">
<button onclick="selectPokemonName()">Submit</button>
在您的脚本中添加以下代码：
function selectPokemonName() {
var pokemonName = document.getElementById("pokemon").value;
const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: pokemonName,
}
const {url, type, id} = apiData
const apiUrl = `${url}${type}/${id}`
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))
}
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
}
- 1 回答
- 0 关注
- 76 浏览
添加回答
举报
0/150
提交
取消