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

英文:

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

设置边框半径时，边框颜色会渐变淡，看起来有点问题。如何解决？

如何停止`setState`中的无限循环

如何使用React Router降低3个级别，例如路径=’…/file’。

Next.js自定义App getInitialProps类型错误

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 在上下文菜单中以大文本形式打开

发表评论