Because that will call functionName() when the element is initiated and set the handler to whatever the function returns.
So if you make a function like this.
function functionName(){
return function(){
alert('hello');
}
}
That would work, but otherwise you just need to reference the function with functionName not actually call it on runtime with functionName() (unless you have a function within a function like above).
Aside from the fact that the provided solution doesn’t seem to be working (even after I ran the CA provided solution), I also have a follow up question:
The question “Why don’t we set the event listener attribute value to a function call?” explains that we simply reference the function makeDoggy to avoid calling it on runtime, which makes sense.
But, since function makeDoggy(e) takes e as a parameter, what specifically is being passed to e when we reference the function makeDoggy by using <img src… onClick={makeDoggy}, without passing an argument?
So here’s my current understanding of what happens here:
When the user clicks the img element, the event listener onClick calls the associated event handler function makeDoggy.
When the event listener calls the event handler, it also passes a single argument - an event object that contains properties describing the event that occurred.
In our event handler function makeDoggy(e), the parameter e receives the event object (e is just a naming convention for receiving an event object argument for event-triggered functions).
Basically, the tl;dr as I understand it is that when an event listener is triggered, it calls the event handler function and also passes an event object to it.
But read carefully what You add to Your code! You **have to click by mouse on the picture of the cat. And then You change ( by clicking the picture on doggy) the picture.
I’m trying to make it so that clicking on the doggy picture it reverts back to the kitty picture. Can some one advise me.
I’ve tried inputing the doggy function’s onClick={makeKitty} , onClick='{makeKitty}', and even onClick='makeKitty.
import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
function makeDoggy(e) {
// Call this extremely useful function on an <img>.
// The <img> will become a picture of a doggy.
e.target.setAttribute('src', 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg');
e.target.setAttribute('alt', 'doggy');
e.target.setAttribute('onClick', {'makeKitty'});
}
function makeKitty(e) {
e.target.setAttribute('src', 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg');
e.target.setAttribute('alt', 'kitty');
e.target.setAttribute('onClick', {'makeDoggy'});
}
const kitty = (
<img
src="https://content.codecademy.com/courses/React/react_photo-kitty.jpg"
alt="kitty"
onClick={makeDoggy} />
);
root.render(kitty);
Hi, mccormicka, think easily, wish you a lot of patience make it easy, shorter, like this:
Copy only code, I mean text, picture of that cat jumps from source code
import React from ‘react’;
import { createRoot } from ‘react-dom/client’;
const container = document.getElementById(‘app’);
const root = createRoot(container);
function makeDoggy(e) {
// Call this extremely useful function on an .
// The will become a picture of a doggy.
e.target.setAttribute(‘src’, ‘https://content.codecademy.com/courses/React/react_photo-puppy.jpeg’);
e.target.setAttribute(‘alt’, ‘doggy’);
}