Using target on an event listener(animal fun facts project)

Hi all,
In the animal fun facts project, we use

const name = e.target.alt;
const animalInfo = animals[name];

where the animal image has attributes:

<img key = {animal} className = 'animal' alt = {animal} src = {animals[animal].image} ariaLabel = {animal} role = 'button' onClick = {displayFact} />

When I tried to grab the specific name of animal using other attributes which also have the {animal} value, such as ariaLabel, key,… it does not work. I can grab the name of the animal only by using the “alt”

//this works
const name = e.target.alt;
//these do not work
const name = e.target.key;
const name = e.target.ariaLabel;

Why does this happen?
Link to the project : https://www.codecademy.com/courses/react-101/projects/js-react-animal-fun-facts

Hi,
e in this case stands for the event triggered by events like onClick, onMouseEnter and so on. Event always has the same properties that don’t have anything to do with your ‘animal’ variable – like ‘target’. That target usually is a DOM element that can have an attribute like ‘alt’.
Log ‘e’ and ‘e.target’ to the console and see what you get. This project doesn’t have a console in the Codecademy sandbox, but you can use console of the browser.

Event always has the same properties that don’t have anything to do with your ‘animal’ variable – like ‘target’. That target usually is a DOM element that can have an attribute like ‘alt’.

Thank you for your explanation, I understand this, but my question is why my target property of event e is not accepting any other attribute of <img> other than alt

e.target has properties, it doesn’t accept any. Log them, it’s an endless list of properties and that list is (mainly) fix. Just the values depend on the specific target. Log e.target.attributes. That’s where you find the other attributes.