Animal Fun Facts onClick not working

I cannot figure out why the click event is not working in this exercise:

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/react-101-jsx-u/projects/js-react-animal-fun-facts

this is my code:

import { animals } from './animals'; import React from 'react'; import ReactDOM from 'react-dom'; const title=''; const images = []; const background = (<img className='background' src='/images/ocean.jpg' alt='ocean'/>); const animalFacts=( <div> <h1> {title==='' ? 'Click an animal for a fun fact' : title} </h1> {background} <div className='animals'> {images} </div> <p id='fact'></p> </div> ); 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 fact = animals[e.target.alt].facts; const randomNum = Math.floor(Math.random()*fact.length); const facts = fact[1]; documents.getElementById('fact').innerHTML = facts; } ReactDOM.render(animalFacts,document.getElementById('root'));

Hi Ibo,

there is a typo in your code:

documents.getElementById('fact').innerHTML

There is only one document…

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.