如何使相同的API请求多次而没有重复?

huangapple go评论67阅读模式
英文:

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:

&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;design.css&quot;&gt;
&lt;title&gt;Pokemon Team Generater&lt;/title&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;shortcut icon&quot; type=&quot;image/jpg&quot; href=&quot;favicon.png&quot;/&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1 class=&quot;pt-3 text-danger&quot;&gt;Pokemon Team Generater&lt;/h1&gt;
&lt;div class=&quot;container text-center&quot;&gt;
&lt;div class=&quot;row row-cols-3&quot;&gt;
&lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
&lt;img src=&quot;&quot; id=&quot;pokemon-0&quot;&gt;
&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name-0&quot;&gt;&lt;/div&gt;   
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height-0&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight-0&quot;&gt;&lt;/div&gt; 
&lt;/div&gt;
&lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
&lt;img src=&quot;&quot; id=&quot;pokemon-1&quot;&gt;
&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name-1&quot;&gt;&lt;/div&gt;   
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height-1&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight-1&quot;&gt;&lt;/div&gt; 
&lt;/div&gt;
&lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
&lt;img src=&quot;&quot; id=&quot;pokemon-2&quot;&gt;
&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name-2&quot;&gt;&lt;/div&gt;   
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height-2&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight-2&quot;&gt;&lt;/div&gt; 
&lt;/div&gt;
&lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
&lt;img src=&quot;&quot; id=&quot;pokemon-3&quot;&gt;
&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name-3&quot;&gt;&lt;/div&gt;   
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height-3&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight-3&quot;&gt;&lt;/div&gt; 
&lt;/div&gt;
&lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
&lt;img src=&quot;&quot; id=&quot;pokemon-4&quot;&gt;
&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name-4&quot;&gt;&lt;/div&gt;   
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height-4&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight-4&quot;&gt;&lt;/div&gt; 
&lt;/div&gt;
&lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
&lt;img src=&quot;&quot; id=&quot;pokemon-5&quot;&gt;
&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name-5&quot;&gt;&lt;/div&gt;   
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height-5&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight-5&quot;&gt;&lt;/div&gt; 
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;text-center&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;button btn btn-outline-danger btn-lg&quot;&gt;Generate Pokemon Team!&lt;/button&gt;
&lt;/div&gt;
&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

And the JS behind that is:

const button = document.querySelector(&quot;.button&quot;);
button.addEventListener(&#39;click&#39;, (e) =&gt; {
e.preventDefault()
for (let i = 0; i &lt; 6; i++) {
const randomNumber = Math.ceil(Math.random() * 905)
const nameElem = document.getElementById(&quot;name-&quot; + i);
const pokemonImage = document.getElementById(&#39;pokemon-&#39; + i)
const heightElem = document.getElementById(&quot;height-&quot; + i);
const weightElem = document.getElementById(&quot;weight-&quot; + i);
fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
.then(response =&gt; response.json())
.then(pokemon =&gt; {
const {
name,
height,
weight,
sprites
} = pokemon;
console.log(name)
nameElem.innerHTML = name;
heightElem.innerHTML = height;
weightElem.innerHTML = weight;
pokemonImage.setAttribute(&#39;src&#39;, sprites.front_default);
})
}
})

And the CSS isn't even changed.

huangapple
  • 本文由 发表于 2023年3月21日 03:22:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/75794471-2.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定