Animal Fun Facts error

This is about Animal Fun Facts error , If you know the answer please tell me

My code is `import { animals } from ‘./animals’;
import React from ‘react’;
import ReactDOM from ‘react-dom’;

const title = “”;

const background = (
ocean
)

const images = ;

for (const animal in animals) {
images.push(
()
)
}

function displayfact(e) {
const animalInfo = animal[e.taget.alt].facts;
const optionIndex = Math.floor(Math.random() * animalInfo.facts.length);

const funfact = animalInfo.facts(optionIndex);

document.getElementById(“Fact”).innerHTML = funfact;
}

const animalFacts = (

{title == "" ? 'Click an animal for a fun fact' : title}

{background}

{images}
);

ReactDOM.render(animalFacts, document.getElementById(‘root’));`

thanks for the help if anyone tries to help

Hi @mmooaazz
please wrap your code in three backticks to make it more readable or mark it and click </> in the editor.
And please go a little further into detaills as to what error you. encounter…

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = "";

const background = (
  <img 
  className='background'
  alt='ocean'
  src='/images/ocean.jpg'
  />
  )

const images = [];

for (const animal in animals) {
images.push(
(<img
key={animal}
className='animal'
alt={animal}
src={animals[animal].image}
ariaLabel={animal}
role='button'
onClick={displayfact}
   />)
  )
}

function displayfact(e) {
const animalInfo = animal[e.taget.alt].facts;
const optionIndex = Math.floor(Math.random() * animalInfo.facts.length);
  
const funfact = animalInfo.facts(optionIndex);
  
document.getElementById("Fact").innerHTML = funfact;
}

const animalFacts = (
<div>
<h1> {title == "" ? 'Click an animal for a fun fact' : title} </h1>
{background}
<p id="Fact"></p>
<div className="animals">
{images}
</div>
</div>
);

ReactDOM.render(animalFacts, document.getElementById('root'));

The problem is when I click on an animal it doesn’t show a fact

Even if you develop in the Codecademy environment and there is no console provided, you can still use the browser’s console.
I would suggest that you console.log each variable in your displayfact function to check the following:

  • Is the function executed on click in the first place?
  • Do all your variables log the expected result?

That should help you to locate the error.

it helped but something else is wrong for some reason the text appears behind the background.

This is not the correct way to access HTML elements in React:

If I remember correctly, the JSX supposed to be rendered is already prewritten in the exercise.

This is what Step 8 says about how to render your image list:

Now that we have our array of images, let’s inject it into the JSX expression.
Within the animalFacts JSX, underneath {background} , create a <div> . Give it a className attribute and set it equal to 'animals' . Nest the array of images inside of this element.

It works ! thanks for the help I was really stuck . now I know how to debug Javascript code without a console too !

1 Like

You’re welcome. It’s never wrong to use the console though…

Hi @mirja_t

I see you have been very helpful here, I am having a near similar problem, I am unable to get my displayed animals to become clickable, please see my code below, in case anyone is able to spot the issue. It displays alright, but no text or animals not selected or clickable. Unable to find where its gone wrong. I think its from Task 10, went through the video, made sense thereafter, but still doesnt work.

Cheers

import { animals } from './animals';

import React from 'react';

import ReactDOM from 'react-dom';


const title = '';

{/* const showBackground = true; */}

const background = (

  <img 

    className='background' 

    alt='ocean' 

    src='images/ocean.jpg' 

  />

);

const images = [];

for (const animal in animals) {

  images.push(

    <img 

      key={animal}

      className='animal'

      alt={animal}

      src={animals[animal].image}

      aria-label={animal}

      role='button'

      onClick={displayFact}

    />

  )

}

function displayFact(e) {

   const selectedAnimal = e.target.alt;

  const animalInfo = animals[selctedAnimal];

  const optionIndex = Math.floor(Math.random() * animalInfo.facts.length);

const funFact = animalInfo.facts[optionIndex];

document.getElementById('fact').innerHTML = funFact;

};

const animalFacts = (

 <div>

    <h1>

        {title === '' ? "Click an animal for a fun fact" : title}

    </h1>

    {background}

    <p id='fact'></p>

    <div className='animals'>

      {images}

    </div>

  </div>

  );


  ReactDOM.render(

    animalFacts, document.getElementById('root')

  );

Hi @course7494489434
did you already check the console’s browser to see if it already logs an error related to your code?
And did you already add some consoles to check if:

  • the function displayFact responses to clicks
  • if the object values of ‘animals’ you assign to the image attributes have the expected results

Hi @mirja_t
I do not find any error, but I am continuing to try debug it. Not responding to clicks is one of the problems…
I wish I had done it on my VSCode, not sure about this editor

You can still use the console of the browser.
How did you find out if it doesn’t respond to a click? Did you add a console to the function and log ‘e.target’ for example, but the console doesn’t show up?
Just click on the image and not seeing the expected result in the localhost window wouldn’t tell you if the function responds to clicks or not.

Hi @mirja_t
Am unable to use the browser console, I keep getting error:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Not sure why though, probably the firewall here? All I get where I would expect to see console, I see browser emulator, is what am having to work with.
Otherwise, I am pretty certain I have got it right. Its slowly driving me round the bend…

Ok, does a refresh of the browser or local window help?
This is the error I get when I paste your code in my setting:
Bildschirmfoto 2021-06-28 um 23.39.16
(After click on an animal)

Which browser do you use?

Thanks a lot, I use vivaldi (firefox really). I use it for my coding alright though.
I see an undefined., hmmm :smiley:

I would recommend Chrome because the devtools are really good.
Take a close look at the error message. The solution is in that.