无法获取模式来显示口袋妖怪的类型和图像

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

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First JS App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
    <header class = "page-header">
    <img src = "img/PokemonLogo.svg" alt = "Pokemon Logo" class = "logo">
    </header>
    <h1>POKEDEX (Gotta Catch 'Em All)</h1>
    <ul class = "pokemon-list list-group">

    </ul>
    <div id="modal-container"></div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      
      <div class= "modal-header">
        <h3 class="modal-title" id="titleModal"> </h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img id="pokemonImage" src=" " alt="pokemon image">
        <div class="container">
          <div class="row">  
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-dismiss="modal" aria-label="Close">Close</button>
      </div>
    </div>
  </div>
</div>
    <img src = "img/voltorb.svg" alt = "picture of the pokemon voltorb" class = "voltorb">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src = "js/promise-polyfill.js"></script>
    <script src = "js/fetch-polyfill.js"></script>
    <script src = "js/scripts.js"></script>
  </body>
</html>

JS：

let pokemonRepository = (function () {
  let pokemonList = [];
  let apiUrl = "https://pokeapi.co/api/v2/pokemon/?limit=150";

  function add(pokemon) {
    pokemonList.push(pokemon);
  }

  function getAll() {
    return pokemonList;
  }

  function showDetails(pokemon) {
    loadDetails(pokemon).then(function () {
      showModal(pokemon.name, pokemon.height, pokemon.imageUrl);
    });
  }

  function hideModal() {
    let modalContainer = document.querySelector("#modal-container");
    modalContainer.classList.remove("is-visible");
  }

  window.addEventListener("keydown", (e) => {
    let modalContainer = document.querySelector("#modal-container");
    if (e.key === "Escape" && modalContainer.classList.contains("is-visible")) {
      hideModal();
    }
  });

  function showModal(title, text) {
    const name = document.querySelector("#titleModal");
    const height = document.querySelector(".modal-body");
    name.innerHTML = title;
    height.innerHTML = `Height: ${text}`;
  }

  function addListItem(pokemon) {
    let ulItem = document.querySelector(".pokemon-list");
    let listItem = document.createElement("li");
    let button = document.createElement("button");

    button.setAttribute("data-toggle", "modal");
    button.setAttribute("data-target", "#exampleModal");
    button.innerText = pokemon.name;

    button.classList.add("btn-primary");
    listItem.classList.add("list-group-item");
    listItem.appendChild(button);
    ulItem.appendChild(listItem);

    button.addEventListener("click", function () {
      showDetails(pokemon);
    });
  }

  function loadList() {
    return fetch(apiUrl)
      .then(function (response) {
        return response.json();
      })
      .then(function (json) {
        json.results.forEach(function (item) {
          let pokemon = {
            name: item.name,
            detailsUrl: item.url,
            imageUrl: "",
          };

          add(pokemon);
        });
      })
      .catch(function (e) {
        console.error(e);
      });
  }

  function loadDetails(item) {
    let url = item.detailsUrl;

    return fetch(url)
      .then(function (response) {
        return response.json();
      })
      .then(function (details) {
        // console.log(details);
        // Now we add the details to the item
        item.imageUrl = details.sprites.front_default;
        item.height = details.height;
        item.types = details.types;
      })
      .catch(function (e) {
        console.error(e);
      });
  }

  return {
    add,
    getAll,
    addListItem,
    loadList,
    showDetails,
  };
})();

pokemonRepository.loadList().then(function () {
  // Now the data is loaded!
  pokemonRepository.getAll().forEach(function (pokemon) {
    pokemonRepository.addListItem(pokemon);
  });
});

经过一些编辑后，模态显示 Pokemon 名称和高度，但不显示来自 API 的图像。我认为问题出在 

showModal
函数中，但是当我尝试声明“image”变量时，它已经在我的代码中进一步声明了。我不确定我做错了什么，我感觉很困难。任何帮助将不胜感激。

javascript html bootstrap-4 bootstrap-modal
1个回答
0
投票

我注意到两个问题

first
我在评论中提到你声明你的函数需要2个参数
function showModal(title, text)
但是当你调用它时发送3个
showModal(pokemon.name, pokemon.height, pokemon.imageUrl);

second
在这一行中 height.innerHTML = 
Height: ${text}
;你的 
height
变量是你的整个模态主体，并且你正在用 pokemon 的高度替换模态主体的innerHTML，这意味着现在 
<img id="pokemonImage" src=" " alt="pokemon image">
以及其他元素现在都消失了。所以我修复了你的代码，为你的口袋妖怪高度添加了一个
label
，而不是替换你的模态主体内容

let pokemonRepository = (function() {
  let pokemonList = [];
  let apiUrl = "https://pokeapi.co/api/v2/pokemon/?limit=150";

  function add(pokemon) {
    pokemonList.push(pokemon);
  }

  function getAll() {
    return pokemonList;
  }

  function showDetails(pokemon) {
    loadDetails(pokemon).then(function() {
      showModal(pokemon.name, pokemon.height, pokemon.imageUrl);
    });
  }

  function hideModal() {
    let modalContainer = document.querySelector("#modal-container");
    modalContainer.classList.remove("is-visible");
  }

  window.addEventListener("keydown", (e) => {
    let modalContainer = document.querySelector("#modal-container");
    if (e.key === "Escape" && modalContainer.classList.contains("is-visible")) {
      hideModal();
    }
  });

  function showModal(title, text, imageUrl) {
    const name = document.querySelector("#titleModal");
    const modalBody = document.querySelector(".modal-body");
    const image = modalBody.querySelector("#pokemonImage");
    const height = modalBody.querySelector("#pokemonHeight");

    name.innerHTML = title;
    height.innerHTML = `Height: ${text}`;
    image.src = imageUrl;
  }

  function addListItem(pokemon) {
    let ulItem = document.querySelector(".pokemon-list");
    let listItem = document.createElement("li");
    let button = document.createElement("button");

    button.setAttribute("data-toggle", "modal");
    button.setAttribute("data-target", "#exampleModal");
    button.innerText = pokemon.name;

    button.classList.add("btn-primary");
    listItem.classList.add("list-group-item");
    listItem.appendChild(button);
    ulItem.appendChild(listItem);

    button.addEventListener("click", function() {
      showDetails(pokemon);
    });
  }

  function loadList() {
    return fetch(apiUrl)
      .then(function(response) {
        return response.json();
      })
      .then(function(json) {
        json.results.forEach(function(item) {
          let pokemon = {
            name: item.name,
            detailsUrl: item.url,
            imageUrl: "",
          };

          add(pokemon);
        });
      })
      .catch(function(e) {
        console.error(e);
      });
  }

  function loadDetails(item) {
    let url = item.detailsUrl;

    return fetch(url)
      .then(function(response) {
        return response.json();
      })
      .then(function(details) {
        //console.log(details);
        // Now we add the details to the item
        item.imageUrl = details.sprites.front_default;
        item.height = details.height;
        item.types = details.types;
      })
      .catch(function(e) {
        console.error(e);
      });
  }

  return {
    add,
    getAll,
    addListItem,
    loadList,
    showDetails,
  };
})();

pokemonRepository.loadList().then(function() {
  // Now the data is loaded!
  pokemonRepository.getAll().forEach(function(pokemon) {
    pokemonRepository.addListItem(pokemon);
  });
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First JS App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
  <header class="page-header">
    <img src="img/PokemonLogo.svg" alt="Pokemon Logo" class="logo">
  </header>
  <h1>POKEDEX (Gotta Catch 'Em All)</h1>
  <ul class="pokemon-list list-group">

  </ul>
  <div id="modal-container"></div>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>


  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <h3 class="modal-title" id="titleModal"> </h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <img id="pokemonImage" src="" alt="pokemon image">
          <label id="pokemonHeight"></label>
          <div class="container">
            <div class="row">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-dismiss="modal" aria-label="Close">Close</button>
        </div>
      </div>
    </div>
  </div>
  <img src="img/voltorb.svg" alt="picture of the pokemon voltorb" class="voltorb">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="js/promise-polyfill.js"></script>
  <script src="js/fetch-polyfill.js"></script>
  <script src="js/scripts.js"></script>
</body>

</html>

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