Types part of RPG Creature Search App error

JavaScript
1

Below is my HTML Code and an abridged version of my javaScript code. I opted to go with this approach as it is a nearly complete certification project, which much of code not relevant to my query, however I will provide it, if requested. Note in abridging the code I changed one line, that is const {types}=data;, the full version of that line has many more non-blank characters.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> RPG Creature Search App</title>
    <link rel="style-sheet" href="styles.css">
  </head>
  <body>
    <h1>Search for a creature</h1>
    <label>Creature </label>
    <input id="search-input" required>
    <button id="search-button">Search</button>
    <p id="creature-name"></p>
    <p id="creature-id"></p>
    <p id="weight"></p>
    <p id="height"></p>
    <p id="types"></p>
    <p id="hp"></p>
    <p id="attack"></p>
    <p id="defense"></p>
    <p id="special-attack"></p>
    <p id="special-defense"></p>
    <p id="speed"></p>
    <script src="./script.js"></script>
  </body>
</html>

const searchBtn=document.getElementById("search-button");
async function viewCreatureStats() {
  const typesP=document.getElementById("types");
  typesP.innerText=``;    
      fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchInput}`)
  .then(res => res.json())
  .then((data)=>{
        //consider .map() and hasOwnProperty() methods
    const {types}=data;
    console.log(types.name);//Line is there for debugging only
    if (types){
      typesP.innerText=`Has the following Types`
      types.forEach(typeN=>typesP.innerText+=` ${typeN.name}`);  
    }
  }) 
//return;
}
searchBtn.addEventListener("click", viewCreatureStats);

I am pretty sure this line if (types){ is at least one of the lines at fault but not sure how to correct it, but feel free to indicate other errors.

1 Like
2

Just realise I has not taken my own prior advice to research has own property so trying to now.

3

Please post all of the JavaScript

4 
const searchBtn=document.getElementById("search-button");

async function viewCreatureStats() {

  const searchInput=document.getElementById("search-input").value;

  const creatureNameP=document.getElementById("creature-name");

  const creatureIdP=document.getElementById("creature-id");

  const weightP=document.getElementById("weight");

  const heightP=document.getElementById("height");

  const typesP=document.getElementById("types");

  const hpP=document.getElementById("hp");

  const attackP=document.getElementById("attack");

  const defenseP=document.getElementById("defense");

  const specialAttackP=document.getElementById("special-attack");

  const specialDefenseP=document.getElementById("special-defense");

  const speedP=document.getElementById("speed");

typesP.innerText=``;    

      fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchInput}`)

  .then(res => res.json())

  .then((data)=>{

        //consider .map() and hasOwnProperty() methods

    const {id, name, weight, height, stats, types}=data;

    // I assume ignore the "special" key

    creatureNameP.innerText=`${name.toUpperCase()}`;

    creatureIdP.innerText=`#${id}`;

    weightP.innerText=`Weight: ${weight}`;

    heightP.innerText=`Height: ${height}`;

    hpP.innerText=`${stats[0].base_stat}`;

    attackP.innerText=`${stats[1].base_stat}`;

    defenseP.innerText=`${stats[2].base_stat}`;

    specialAttackP.innerText=`${stats[3].base_stat}`;

    specialDefenseP.innerText=`${stats[4].base_stat}`;

    speedP.innerText=`${stats[5].base_stat}`;

    console.log(types.name);//Line is there for debugging only

    if (types){

      typesP.innerText=`Has the following Types`

      types.forEach(typeN=>typesP.innerText+=` ${typeN.name}`);  

    }

  }) 

  

  .catch((err) => {

    console.log(err);

    alert("Creature not found")});

    

  

//return;





}

searchBtn.addEventListener("click", viewCreatureStats);

Decided to post with catch not commented out, please note I generally have it commented out when working on my code.

1 Like
6

How did you edit I can easily see what. It means I avoid this error next time.

7

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

Share a link to the lab you’re working on.

9

a single element should be added within the #types element that contains the text FIRE
two elements should be added within the #types element that contain text values WATER and ROCK

Here is what you are missing in the user stories.

10

I know that but not what to do to solve that.

11

Forgot to, here you are Build an RPG Creature Search App Project: Build an RPG Creature Search App | freeCodeCamp.org

12

I thought I did the latter way, the former, (at least for time, not sure if it is still the case) stop working for me.

13

It does happen for me the same way as image. On click the </> button back ticks are not created is instead the background for the code. One line height which is then expanded to the height of your code.

14

image
image1061Ă—347 22.2 KB

See image for an example.

15

What exactly is it that you know about what I posted from the instructions? Does your code create an HTML element that contains the name of the type? There should be no other text. Look at the example app.

16

Yes your comment takes me closer however either I need help to make my approach as is work (if and forEach) change the innerText of my TypesP element or need help for a different approach that this.

17

Please answer the question.

18
  1. Write some code:

code
code
code

  1. Highlight the code.
  2. Press the </> button in the menu

Screenshot 2025-12-06 123035
Screenshot 2025-12-06 123035612Ă—282 23.2 KB

Backticks will appear around the code and it will be properly formatted.

Screenshot 2025-12-06 123105
Screenshot 2025-12-06 123105427Ă—332 16.9 KB

code
code
code
19

Does not for me maybe it is a Edge thing, I have chrome too, so will I try it next time.

20

Maybe you need to disable any browser extensions.

21

Only have McAfee® WebAdvisor and Google Docs Offline could either of these, be the issue.