Html Question posted in
Some basic documentation can be found here.

Html – Can't get modal to display type and image of Pokemon

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

After some editing, the modal is displaying the Pokemon name and height but not the image from the API. I thought the issue was in the showModal function but when I tried to declare the "image" variable, it has already been declared further down in my code. I am not sure what I am doing wrong and I am feeling very stuck. Any help would be GREATLY appreciated.

Tags:

2

Answers


  1. 0

    I noticed 2 problems

    1- what I mentioned in the comments you declared your function to expect 2 parameters function showModal(title, text) but send 3 when you call it showModal(pokemon.name, pokemon.height, pokemon.imageUrl);

    2- In this line height.innerHTML = Height: ${text}; your height variable is your entire modal-body and you are replacing the innerHTML of your modal-body with just the height of the pokemon, which means that now the <img id="pokemonImage" src=" " alt="pokemon image"> along with other elements are now gone. So I fixed your code, added a label for your pokemon height instead of replacing your modal-body content

    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>
    Login or Signup to reply.
  2. 0

    In your showDetails function, you pass pokemon.name pokemon.height and pokemon.imageUrl into the showModal function. But your showModal function does not accept a third parameter or do anything with the pokemon.imageUrl. I recommend adding this to the showModal function to actually display the pokemon image.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search