對于學(xué)校，我正在使用 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>我現(xiàn)在得到的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條經(jīng)驗 獲得超5個贊
嘗試這個 ：
在您的 html 中，您需要為動態(tài)神奇寶貝名稱添加一個輸入字段。
<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 關(guān)注
- 117 瀏覽
添加回答
舉報
0/150
提交
取消