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

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

How do I make the same API request multibul times without duplicates?

问题

我正在尝试使用PokeAPI和JavaScript随机生成一个宝可梦队伍，我已经尝试了一些方法，但似乎不起作用，这是我目前的代码：

  1. const nameElem = document.getElementById("name");
  2. const pokemonImage = document.getElementById("pokemon");
  3. const heightElem = document.getElementById("height");
  4. const weightElem = document.getElementById("weight");
  5. const button = document.querySelector(".button");
  7. button.addEventListener('click', (e) => {
  8.   e.preventDefault();
  9.   const randomNumber = Math.ceil(Math.random() * 905);
  10.   fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
  11.     .then(response => response.json())
  12.     .then(pokemon => {
  13.       const {
  14.         name,
  15.         height,
  16.         weight,
  17.         sprites
  18.       } = pokemon;
  19.       console.log(name);
  20.       nameElem.innerHTML = name;
  21.       heightElem.innerHTML = height;
  22.       weightElem.innerHTML = weight;
  23.       pokemonImage.setAttribute('src', sprites.front_default);
  24.     });
  25. });

我希望进行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

  1. const nameElem = document.getElementById("name");
  2. const pokemonImage = document.getElementById('pokemon')
  3. const heightElem = document.getElementById("height");
  4. const weightElem = document.getElementById("weight");
  5. const button = document.querySelector(".button");
  7. button.addEventListener('click', (e) => {
  8.   e.preventDefault()
  9.   const randomNumber = Math.ceil(Math.random() * 905)
  10.   fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
  11.     .then(response => response.json())
  12.     .then(pokemon => {
  13.       const {
  14.         name,
  15.         height,
  16.         weight,
  17.         sprites
  18.       } = pokemon;
  19.       console.log(name)
  20.       nameElem.innerHTML = name;
  21.       heightElem.innerHTML = height;
  22.       weightElem.innerHTML = weight;
  23.       pokemonImage.setAttribute('src', sprites.front_default);
  24.     })
  25. })

I want to have 6 api requests.

答案1

得分: 0

以下是您要翻译的HTML代码部分：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="design.css">
  7.     <title>Pokemon Team Generator</title>
  8.     <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">
  9.     <link rel="shortcut icon" type="image/jpg" href="favicon.png">
  10. </head>
  12. <body>
  14.     <h1 class="pt-3 text-danger">Pokemon Team Generator</h1>
  16.     <div class="container text-center">
  17.         <div class="row row-cols-3">
  18.             <div class="g-col-6 g-col-md-4 p-5">
  19.                 <img src="" id="pokemon-0">
  20.                 <h3>Name:</h3>
  21.                 <div id="name-0"></div>
  22.                 <h3>Height:</h3>
  23.                 <div id="height-0"></div>
  24.                 <h3>Weight:</h3>
  25.                 <div id="weight-0"></div>
  26.             </div>
  28.             <div class="g-col-6 g-col-md-4 p-5">
  29.                 <img src="" id="pokemon-1">
  30.                 <h3>Name:</h3>
  31.                 <div id="name-1"></div>
  32.                 <h3>Height:</h3>
  33.                 <div id="height-1"></div>
  34.                 <h3>Weight:</h3>
  35.                 <div id="weight-1"></div>
  36.             </div>
  38.             <div class="g-col-6 g-col-md-4 p-5">
  39.                 <img src="" id="pokemon-2">
  40.                 <h3>Name:</h3>
  41.                 <div id="name-2"></div>
  42.                 <h3>Height:</h3>
  43.                 <div id="height-2"></div>
  44.                 <h3>Weight:</h3>
  45.                 <div id="weight-2"></div>
  46.             </div>
  48.             <div class="g-col-6 g-col-md-4 p-5">
  49.                 <img src="" id="pokemon-3">
  50.                 <h3>Name:</h3>
  51.                 <div id="name-3"></div>
  52.                 <h3>Height:</h3>
  53.                 <div id="height-3"></div>
  54.                 <h3>Weight:</h3>
  55.                 <div id="weight-3"></div>
  56.             </div>
  58.             <div class="g-col-6 g-col-md-4 p-5">
  59.                 <img src="" id="pokemon-4">
  60.                 <h3>Name:</h3>
  61.                 <div id="name-4"></div>
  62.                 <h3>Height:</h3>
  63.                 <div id="height-4"></div>
  64.                 <h3>Weight:</h3>
  65.                 <div id="weight-4"></div>
  66.             </div>
  68.             <div class="g-col-6 g-col-md-4 p-5">
  69.                 <img src="" id="pokemon-5">
  70.                 <h3>Name:</h3>
  71.                 <div id="name-5"></div>
  72.                 <h3>Height:</h3>
  73.                 <div id="height-5"></div>
  74.                 <h3>Weight:</h3>
  75.                 <div id="weight-5"></div>
  76.             </div>
  77.         </div>
  78.     </div>
  80.     <div class="text-center">
  81.         <button type="button" class="button btn btn-outline-danger btn-lg">Generate Pokemon Team!</button>
  82.     </div>
  84.     <script src="script.js"></script>
  85.     <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>
  86. </body>
  87. </html>

希望这可以帮助您。如果有其他翻译需求，请随时告诉我。

英文:

So what I've edited is the HTML to add an ID to each of them just for ease:

So the new HTML:

  1. &lt;html lang=&quot;en&quot;&gt;
  2. &lt;head&gt;
  3. &lt;meta charset=&quot;UTF-8&quot;&gt;
  4. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;link rel=&quot;stylesheet&quot; href=&quot;design.css&quot;&gt;
  7. &lt;title&gt;Pokemon Team Generater&lt;/title&gt;
  8. &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;
  9. &lt;link rel=&quot;shortcut icon&quot; type=&quot;image/jpg&quot; href=&quot;favicon.png&quot;/&gt;
  10. &lt;/head&gt;
  11. &lt;body&gt;
  12. &lt;h1 class=&quot;pt-3 text-danger&quot;&gt;Pokemon Team Generater&lt;/h1&gt;
  13. &lt;div class=&quot;container text-center&quot;&gt;
  14. &lt;div class=&quot;row row-cols-3&quot;&gt;
  15. &lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
  16. &lt;img src=&quot;&quot; id=&quot;pokemon-0&quot;&gt;
  17. &lt;h3&gt;Name:&lt;/h3&gt;
  18. &lt;div id=&quot;name-0&quot;&gt;&lt;/div&gt;   
  19. &lt;h3&gt;Height:&lt;/h3&gt;
  20. &lt;div id=&quot;height-0&quot;&gt;&lt;/div&gt;
  21. &lt;h3&gt;Weight:&lt;/h3&gt;
  22. &lt;div id=&quot;weight-0&quot;&gt;&lt;/div&gt; 
  23. &lt;/div&gt;
  24. &lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
  25. &lt;img src=&quot;&quot; id=&quot;pokemon-1&quot;&gt;
  26. &lt;h3&gt;Name:&lt;/h3&gt;
  27. &lt;div id=&quot;name-1&quot;&gt;&lt;/div&gt;   
  28. &lt;h3&gt;Height:&lt;/h3&gt;
  29. &lt;div id=&quot;height-1&quot;&gt;&lt;/div&gt;
  30. &lt;h3&gt;Weight:&lt;/h3&gt;
  31. &lt;div id=&quot;weight-1&quot;&gt;&lt;/div&gt; 
  32. &lt;/div&gt;
  33. &lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
  34. &lt;img src=&quot;&quot; id=&quot;pokemon-2&quot;&gt;
  35. &lt;h3&gt;Name:&lt;/h3&gt;
  36. &lt;div id=&quot;name-2&quot;&gt;&lt;/div&gt;   
  37. &lt;h3&gt;Height:&lt;/h3&gt;
  38. &lt;div id=&quot;height-2&quot;&gt;&lt;/div&gt;
  39. &lt;h3&gt;Weight:&lt;/h3&gt;
  40. &lt;div id=&quot;weight-2&quot;&gt;&lt;/div&gt; 
  41. &lt;/div&gt;
  42. &lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
  43. &lt;img src=&quot;&quot; id=&quot;pokemon-3&quot;&gt;
  44. &lt;h3&gt;Name:&lt;/h3&gt;
  45. &lt;div id=&quot;name-3&quot;&gt;&lt;/div&gt;   
  46. &lt;h3&gt;Height:&lt;/h3&gt;
  47. &lt;div id=&quot;height-3&quot;&gt;&lt;/div&gt;
  48. &lt;h3&gt;Weight:&lt;/h3&gt;
  49. &lt;div id=&quot;weight-3&quot;&gt;&lt;/div&gt; 
  50. &lt;/div&gt;
  51. &lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
  52. &lt;img src=&quot;&quot; id=&quot;pokemon-4&quot;&gt;
  53. &lt;h3&gt;Name:&lt;/h3&gt;
  54. &lt;div id=&quot;name-4&quot;&gt;&lt;/div&gt;   
  55. &lt;h3&gt;Height:&lt;/h3&gt;
  56. &lt;div id=&quot;height-4&quot;&gt;&lt;/div&gt;
  57. &lt;h3&gt;Weight:&lt;/h3&gt;
  58. &lt;div id=&quot;weight-4&quot;&gt;&lt;/div&gt; 
  59. &lt;/div&gt;
  60. &lt;div class=&quot;g-col-6 g-col-md-4 p-5&quot;&gt;
  61. &lt;img src=&quot;&quot; id=&quot;pokemon-5&quot;&gt;
  62. &lt;h3&gt;Name:&lt;/h3&gt;
  63. &lt;div id=&quot;name-5&quot;&gt;&lt;/div&gt;   
  64. &lt;h3&gt;Height:&lt;/h3&gt;
  65. &lt;div id=&quot;height-5&quot;&gt;&lt;/div&gt;
  66. &lt;h3&gt;Weight:&lt;/h3&gt;
  67. &lt;div id=&quot;weight-5&quot;&gt;&lt;/div&gt; 
  68. &lt;/div&gt;
  69. &lt;/div&gt;
  70. &lt;/div&gt;
  71. &lt;div class=&quot;text-center&quot;&gt;
  72. &lt;button type=&quot;button&quot; class=&quot;button btn btn-outline-danger btn-lg&quot;&gt;Generate Pokemon Team!&lt;/button&gt;
  73. &lt;/div&gt;
  74. &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  75. &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;
  76. &lt;/body&gt;
  77. &lt;/html&gt;

And the JS behind that is:

  1. const button = document.querySelector(&quot;.button&quot;);
  2. button.addEventListener(&#39;click&#39;, (e) =&gt; {
  3. e.preventDefault()
  4. for (let i = 0; i &lt; 6; i++) {
  5. const randomNumber = Math.ceil(Math.random() * 905)
  6. const nameElem = document.getElementById(&quot;name-&quot; + i);
  7. const pokemonImage = document.getElementById(&#39;pokemon-&#39; + i)
  8. const heightElem = document.getElementById(&quot;height-&quot; + i);
  9. const weightElem = document.getElementById(&quot;weight-&quot; + i);
  10. fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
  11. .then(response =&gt; response.json())
  12. .then(pokemon =&gt; {
  13. const {
  14. name,
  15. height,
  16. weight,
  17. sprites
  18. } = pokemon;
  19. console.log(name)
  20. nameElem.innerHTML = name;
  21. heightElem.innerHTML = height;
  22. weightElem.innerHTML = weight;
  23. pokemonImage.setAttribute(&#39;src&#39;, sprites.front_default);
  24. })
  25. }
  26. })

And the CSS isn't even changed.

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

发表评论

匿名网友

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

确定