html 显示口袋妖怪图像[已关闭]

- 已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
4天前关闭。
Improve this question
我试图显示pokeapi的图像，但我得到了一个错误，当我输入的名称。当我输入的数字，我得到了口袋妖怪图像后，点击两次。但当我搜索另一个口袋妖怪，我得到了以前的口袋妖怪的数字。我会感谢正确的方式来显示图像的帮助。谢谢。
JS代码如下：

document.querySelector("#search").addEventListener("click", getPokemon);

function getPokemon(e) {
  const name = document.querySelector("#pokemonName").value;
  fetch(`https://pokeapi.co/api/v2/pokemon/${name || id}`)
    .then((res) => res.json())
    .then((data) => {
      console.log(data);
      
      document.getElementById("data_id").innerHTML = data.id;
      document.getElementById("data_name").innerHTML = data.name;
      document.getElementById("data_type").innerHTML = data.types
        .map((type) => type.type.name)
        .join(", ");
      document.getElementById("data_moves").innerHTML = data.moves
        .map((move) => move.move.name)
        .slice(0, 5)
        .join(", ");

        document.getElementById("search").addEventListener("click", getImage);
          
        function getImage() {
            const img = new Image();
            img.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${name || id}.png`;
            document.getElementById("image").appendChild(img);
        }
    })
    .catch((err) => {
      console.log("Error pokemon not found", err);
    });
  e.preventDefault();
}

HTML代码：

<!DOCTYPE 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" />
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <!--  BOOTSTRAP -->
    <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"
    />
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Unbounded&display=swap"
      rel="stylesheet"
    />

    <!-- cdnfonts -->
    <link
      href="https://fonts.cdnfonts.com/css/pokemon-solid"
      rel="stylesheet"
    />

    <title>Pokedex</title>
  </head>
  <body>
    <div class="main-container">
      <h1 class="heading">Pokemon</h1>
      <form class="nameForm">
        <input
          type="text"
          id="pokemonName"
          name="pokemonName"
          placeholder="Enter Pokemon Name"
        /><br />
        <button type="submit" class="sub-btn" id="search">Enter</button>
      </form>

      <div class="pokemonInfo container text-center">
        <div id="image"></div> 
        <div class="row row-cols-2 gy-1">
          <div class="pokemon-info-left dark-green col">Pokedex no.</div>
          <div class="yellow col" id="data_id"></div>
          <div class="w-100"></div>
          <div class="pokemon-info-left light-green col">Name</div>
          <div class="light col" id="data_name"></div>
          <div class="w-100"></div>
          <div class="pokemon-info-left dark-green col">Type</div>
          <div class="yellow col" id="data_type"></div>
          <div class="w-100"></div>
          <div class="pokemon-info-left light-green col">Move</div>
          <div class="light col data_moves" id="data_moves"></div>
        </div>
      </div>
    </div>

    <!-- Javascript -->
    <script src="main.js"></script>
  </body>
</html>

我试了几种方法似乎都无法使它工作。

您可以在div#image中创建一个image标记，并在收到API的响应后更改其src属性。
在HTML代码中，添加以下内容：

<div id="image">
  <img src="" alt="Pokemon Image" id="pokemon-image" />
</div>

在JS代码中，删除以下行：

document.getElementById("search").addEventListener("click", getImage);
          
        function getImage() {
            const img = new Image();
            img.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${name || id}.png`;
            document.getElementById("image").appendChild(img);
        }

并替换为以下代码：

const img_link = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${data.id}.png`
document.getElementById("pokemon-image").setAttribute("src", img_link);

html 显示口袋妖怪图像[已关闭]

1条答案

相关问题

热门标签

最新问答