英文:
How do I make the same API request multibul times without duplicates?
问题
我正在尝试使用PokeAPI和JavaScript随机生成一个宝可梦队伍，我已经尝试了一些方法，但似乎不起作用，这是我目前的代码：
const nameElem = document.getElementById("name");
const pokemonImage = document.getElementById("pokemon");
const heightElem = document.getElementById("height");
const weightElem = document.getElementById("weight");
const button = document.querySelector(".button");
button.addEventListener('click', (e) => {
e.preventDefault();
const randomNumber = Math.ceil(Math.random() * 905);
fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
.then(response => response.json())
.then(pokemon => {
const {
name,
height,
weight,
sprites
} = pokemon;
console.log(name);
nameElem.innerHTML = name;
heightElem.innerHTML = height;
weightElem.innerHTML = weight;
pokemonImage.setAttribute('src', sprites.front_default);
});
});
我希望进行6次API请求。
英文:
I am trying to randomly generate a Pokemon team using PokeAPI and Javascrip, Ive tried a few things but it doesnt seem to be working, this is what I have so far:
https://codepen.io/Alyssamc17/pen/dyqqeMp
const nameElem = document.getElementById("name");
const pokemonImage = document.getElementById('pokemon')
const heightElem = document.getElementById("height");
const weightElem = document.getElementById("weight");
const button = document.querySelector(".button");
button.addEventListener('click', (e) => {
e.preventDefault()
const randomNumber = Math.ceil(Math.random() * 905)
fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
.then(response => response.json())
.then(pokemon => {
const {
name,
height,
weight,
sprites
} = pokemon;
console.log(name)
nameElem.innerHTML = name;
heightElem.innerHTML = height;
weightElem.innerHTML = weight;
pokemonImage.setAttribute('src', sprites.front_default);
})
})
I want to have 6 api requests.
答案1
得分: 0
以下是您要翻译的HTML代码部分：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="design.css">
<title>Pokemon Team Generator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="shortcut icon" type="image/jpg" href="favicon.png">
</head>
<body>
<h1 class="pt-3 text-danger">Pokemon Team Generator</h1>
<div class="container text-center">
<div class="row row-cols-3">
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-0">
<h3>Name:</h3>
<div id="name-0"></div>
<h3>Height:</h3>
<div id="height-0"></div>
<h3>Weight:</h3>
<div id="weight-0"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-1">
<h3>Name:</h3>
<div id="name-1"></div>
<h3>Height:</h3>
<div id="height-1"></div>
<h3>Weight:</h3>
<div id="weight-1"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-2">
<h3>Name:</h3>
<div id="name-2"></div>
<h3>Height:</h3>
<div id="height-2"></div>
<h3>Weight:</h3>
<div id="weight-2"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-3">
<h3>Name:</h3>
<div id="name-3"></div>
<h3>Height:</h3>
<div id="height-3"></div>
<h3>Weight:</h3>
<div id="weight-3"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-4">
<h3>Name:</h3>
<div id="name-4"></div>
<h3>Height:</h3>
<div id="height-4"></div>
<h3>Weight:</h3>
<div id="weight-4"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-5">
<h3>Name:</h3>
<div id="name-5"></div>
<h3>Height:</h3>
<div id="height-5"></div>
<h3>Weight:</h3>
<div id="weight-5"></div>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="button btn btn-outline-danger btn-lg">Generate Pokemon Team!</button>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
希望这可以帮助您。如果有其他翻译需求，请随时告诉我。
英文:
So what I've edited is the HTML to add an ID to each of them just for ease:
So the new HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="design.css">
<title>Pokemon Team Generater</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="shortcut icon" type="image/jpg" href="favicon.png"/>
</head>
<body>
<h1 class="pt-3 text-danger">Pokemon Team Generater</h1>
<div class="container text-center">
<div class="row row-cols-3">
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-0">
<h3>Name:</h3>
<div id="name-0"></div>
<h3>Height:</h3>
<div id="height-0"></div>
<h3>Weight:</h3>
<div id="weight-0"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-1">
<h3>Name:</h3>
<div id="name-1"></div>
<h3>Height:</h3>
<div id="height-1"></div>
<h3>Weight:</h3>
<div id="weight-1"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-2">
<h3>Name:</h3>
<div id="name-2"></div>
<h3>Height:</h3>
<div id="height-2"></div>
<h3>Weight:</h3>
<div id="weight-2"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-3">
<h3>Name:</h3>
<div id="name-3"></div>
<h3>Height:</h3>
<div id="height-3"></div>
<h3>Weight:</h3>
<div id="weight-3"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-4">
<h3>Name:</h3>
<div id="name-4"></div>
<h3>Height:</h3>
<div id="height-4"></div>
<h3>Weight:</h3>
<div id="weight-4"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-5">
<h3>Name:</h3>
<div id="name-5"></div>
<h3>Height:</h3>
<div id="height-5"></div>
<h3>Weight:</h3>
<div id="weight-5"></div>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="button btn btn-outline-danger btn-lg">Generate Pokemon Team!</button>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
And the JS behind that is:
const button = document.querySelector(".button");
button.addEventListener('click', (e) => {
e.preventDefault()
for (let i = 0; i < 6; i++) {
const randomNumber = Math.ceil(Math.random() * 905)
const nameElem = document.getElementById("name-" + i);
const pokemonImage = document.getElementById('pokemon-' + i)
const heightElem = document.getElementById("height-" + i);
const weightElem = document.getElementById("weight-" + i);
fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
.then(response => response.json())
.then(pokemon => {
const {
name,
height,
weight,
sprites
} = pokemon;
console.log(name)
nameElem.innerHTML = name;
heightElem.innerHTML = height;
weightElem.innerHTML = weight;
pokemonImage.setAttribute('src', sprites.front_default);
})
}
})
And the CSS isn't even changed.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论