如何将 JS 的图片请求以 HTML 形式显示

问题描述 投票：0回答：3

我正在尝试用 pokeapi 制作一个口袋妖怪团队生成器，我能够很好地获取文本信息，但我想不出一种显示图像的方法。


<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>
<img src="" id="monster">

<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>

<script src="script.js"></script>

</body>



</html>

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'];
                id.innerHTML = (`Pokemon Id: ${Pokemon['id']}`);

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

我试过使用 ID，但似乎无法在互联网上找到好的 anwsxer。

javascript html api
3个回答
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>

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>

0
投票

你只是犯了一些注意力不集中和拼写错误。否则你的代码是正确的。

工作代码：

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>`  
        })
    })
<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.