javascript - 试图制作一个带有 ID 的对象
问题描述
对于学校,我正在使用口袋妖怪 API,我试图让人们可以输入口袋妖怪名称,它会向他们显示口袋妖怪,而不是我为他们选择的口袋妖怪。
html代码:
<!DOCTYPE html>
<html lang="en">
<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} = 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
}
这将显示一个同上,但我希望它使人们可以输入一些东西,它会显示那个口袋妖怪。
解决方案
尝试这个 :
在您的 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
}
推荐阅读
- javascript - 无法切换。Bootstrap 5 js 未正确初始化?
- .net-core - .NET:如何以跨平台的方式设置“扩展文件属性”?
- typescript - Nuxt + TypeScript 类型在布局和插件中不起作用
- visual-studio-code - 我可以在 VSCode 编辑器上添加波浪下划线吗?
- python - Module Turtle 中的 input() 之类的东西?
- oracle - Oracle PL/SQL 过程中的“冻结”数据状态
- sql - Gorm原始SQL pq:运算符不存在:文本>整数
- parsing - ANTLR的Visitor系统可以在解析文件时自动访问规则上下文吗?
- c++ - 相当于 PyUSB usb.util.find_descriptor 的 libusb
- .net - Excel阿拉伯语列查询.Net