2023年3月21日 00:04:30go评论63阅读模式

英文:

How to bring and image request from JS to display in HTML

问题

我正在尝试使用PokeAPI创建一个宝可梦队伍生成器，我可以成功获取文本信息，但无法找到显示图像的方法。

const name = document.getElementById("name");
const pokemonImage = document.getElementById('monster');
const height = document.getElementById("height");
const weight = 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 => {
            console.log(pokemon);
            name.innerHTML = pokemon['name'];
            height.innerHTML = pokemon['height'];
            weight.innerHTML = pokemon['weight'];
            id.innerHTML = `宝可梦编号: ${pokemon['id']}`;
            pokemonImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon['id']}.png`;
        });
});

我尝试使用ID，但似乎在互联网上找不到一个好的答案。

英文:

I am trying to make a pokemon team generator with pokeapi and i am able to fetch the text info fine but i cant figure out a way to display the image.


&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;title&gt;Java Script 201&lt;/title&gt;




&lt;/head&gt;

&lt;body&gt;
&lt;img src=&quot;&quot; id=&quot;monster&quot;&gt;

&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name&quot;&gt;&lt;/div&gt;   
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight&quot;&gt;&lt;/div&gt;    
&lt;button class=&quot;button&quot;&gt;Generate Pokemon Team!&lt;/button&gt;

&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;

&lt;/body&gt;



&lt;/html&gt;

const name = document.getElementById(&quot;name&quot;);
    const pokemonImage = document.getElementById(&#39;pokemon&#39;)
    const height = document.getElementById(&quot;height&quot;);
    const weight = document.getElementById(&quot;weight&quot;);
    const button = document.querySelector(&quot;.button&quot;);
        button.addEventListener(&#39;click&#39;, (e) =&gt; {
            e.preventDefault()
    const randomNumber = Math.ceil (Math.random() * 905)
    fetch (`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
        .then (response =&gt; response.json())
        .then (pokemon =&gt; {
                console.log(pokemon)
                name.innerHTML = pokemon [&#39;name&#39;];
                height.innerHTML = pokemon [&#39;height&#39;];
                weight.innerHTML = pokemon [&#39;weight&#39;];
                id.innerHTML = (`Pokemon Id: ${Pokemon[&#39;id&#39;]}`);

  pokemonImage.innerHTML =`&lt;img id=&#39;monster&#39; src=https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${Pokemon[&#39;id&#39;]}.png&gt;`  
        })
    })

I have tried using ID and just cant seem to find a good anwsxer on the internet.

答案1

得分: 1

选择页面上的<img>元素并设置其src属性。

const name = document.getElementById("name");
const pokemonImage = document.getElementById('pokemonImg')
const height = document.getElementById("height");
const weight = 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 => {
      name.innerHTML = pokemon['name'];
      height.innerHTML = pokemon['height'];
      weight.innerHTML = pokemon['weight'];
      pokemonImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon['id']}.png`;
    })
})

<img id="pokemonImg">
<h3>Name:</h3>
<div id="name"></div>
<h3>Height:</h3>
<div id="height"></div>
<h3>Weight:</h3>
<div id="weight"></div>
<button class="button">Generate Pokemon Team!</button>

请注意，代码部分未进行翻译。

英文:

Select the <img> element on your page and set its src property.

const name = document.getElementById(&quot;name&quot;);
const pokemonImage = document.getElementById(&#39;pokemonImg&#39;)
const height = document.getElementById(&quot;height&quot;);
const weight = document.getElementById(&quot;weight&quot;);
const button = document.querySelector(&quot;.button&quot;);
button.addEventListener(&#39;click&#39;, (e) =&gt; {
  e.preventDefault()
  const randomNumber = Math.ceil(Math.random() * 905)
  fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
    .then(response =&gt; response.json())
    .then(pokemon =&gt; {
      name.innerHTML = pokemon[&#39;name&#39;];
      height.innerHTML = pokemon[&#39;height&#39;];
      weight.innerHTML = pokemon[&#39;weight&#39;];
      pokemonImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon[&#39;id&#39;]}.png`;
    })
})

&lt;img id=&quot;pokemonImg&quot;&gt;
&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight&quot;&gt;&lt;/div&gt;
&lt;button class=&quot;button&quot;&gt;Generate Pokemon Team!&lt;/button&gt;

答案2

得分: 0

你只需获取带有id的标签并设置属性。

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.back_default);
    })
})

<img src="" id="pokemon">

<h3>Name:</h3>
<div id="name"></div>
<h3>Height:</h3>
<div id="height"></div>
<h3>Weight:</h3>
<div id="weight"></div>
<button class="button">Generate Pokemon Team!</button>

英文:

You can just get the tag wit the id and set the attribute

const nameElem = document.getElementById(&quot;name&quot;);
const pokemonImage = document.getElementById(&#39;pokemon&#39;)
const heightElem = document.getElementById(&quot;height&quot;);
const weightElem = document.getElementById(&quot;weight&quot;);
const button = document.querySelector(&quot;.button&quot;);

button.addEventListener(&#39;click&#39;, (e) =&gt; {
  e.preventDefault()
  const randomNumber = Math.ceil(Math.random() * 905)
  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.back_default);
    })
})

&lt;img src=&quot;&quot; id=&quot;pokemon&quot;&gt;

&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight&quot;&gt;&lt;/div&gt;
&lt;button class=&quot;button&quot;&gt;Generate Pokemon Team!&lt;/button&gt;

答案3

得分: 0

以下是您要翻译的代码的中文翻译：

你只是犯了一些疏忽和拼写错误。否则，你的代码是正确的。

工作代码：

// 开始代码片段: js 隐藏: false 控制台: true 转译: false

// 语言: lang-js
const name = document.getElementById("name");
const pokemonImage = document.getElementById('pokemon')
const height = document.getElementById("height");
const weight = 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 => {
      console.log(pokemon)
      name.innerHTML = pokemon['name'];
      height.innerHTML = pokemon['height'];
      weight.innerHTML = pokemon['weight'];

      pokemonImage.innerHTML = `<img id='monster' src=https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon['id']}.png>`
    })
})

// 语言: lang-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">
      <title>Java Script 201</title>
  </head>
  <body>
    <div id="pokemon"></div>
    <h3>Name:</h3>
    <div id="name"></div>
    <h3>Height:</h3>
    <div id="height"></div>
    <h3>Weight:</h3>
    <div id="weight"></div>
    <button class="button">Generate Pokemon Team!</button>
  </body>
</html>

// 结束代码片段

希望这对您有所帮助。如果您需要进一步的帮助，请随时告诉我。

英文:

You just have made some inattention and typo errors. Otherwise you code is correct.

The working code :

const name = document.getElementById(&quot;name&quot;);
const pokemonImage = document.getElementById(&#39;pokemon&#39;)
const height = document.getElementById(&quot;height&quot;);
const weight = document.getElementById(&quot;weight&quot;);
const button = document.querySelector(&quot;.button&quot;);
button.addEventListener(&#39;click&#39;, (e) =&gt; {
e.preventDefault()
const randomNumber = Math.ceil (Math.random() * 905)
fetch (`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
.then (response =&gt; response.json())
.then (pokemon =&gt; {
console.log(pokemon)
name.innerHTML = pokemon [&#39;name&#39;];
height.innerHTML = pokemon [&#39;height&#39;];
weight.innerHTML = pokemon [&#39;weight&#39;];
pokemonImage.innerHTML =`&lt;img id=&#39;monster&#39; src=https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon[&#39;id&#39;]}.png&gt;`  
})
})

&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;title&gt;Java Script 201&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;pokemon&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Name:&lt;/h3&gt;
&lt;div id=&quot;name&quot;&gt;&lt;/div&gt;   
&lt;h3&gt;Height:&lt;/h3&gt;
&lt;div id=&quot;height&quot;&gt;&lt;/div&gt;
&lt;h3&gt;Weight:&lt;/h3&gt;
&lt;div id=&quot;weight&quot;&gt;&lt;/div&gt;    
&lt;button class=&quot;button&quot;&gt;Generate Pokemon Team!&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何从JavaScript将图像请求带到HTML中显示

问题

答案1

答案2

答案3

Why do I need to import React from 'react' in the index.js file when it's not neccessary to import react anymore?

在浏览器输入中显示本地时间，使用 ISO 格式进行 FormData 提交。

找到两个键的最小值

SimpleMDE Markdown编辑器在使用Vue挂载时被禁用。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论