FAQ: Javascript and the DOM - Interactivity with onclick


#1

This community-built FAQ covers the “Interactivity with onclick” exercise from the lesson “Javascript and the DOM”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Interactivity with onclick

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

I am confused as to what I am doing wrong here…


#3

It has to do with your placement of the event listener. It should not be inside the handler function.

function handler() {
    //
}
element.onclick = handler;

handler in this case would be your function, by reference only. This is known as a callback. That should get you through the lesson.

Something of note, though not a key to this lesson is that the handler is scoped to the event object (element) and as a declared function inherits that context so has a this object.

function turnButtonRed (){
  this.style.backgroundColor = "red";
  this.style.color = "white";
  this.innerHTML = "Red Button";
}

Don’t let that confuse you, though. Just make a note.

Were the handler to be an arrow function, we could not do this and would be forced to refer to the object directly.

element.style. ...

as this lesson has us do. That means this will also work,

const turnButtonRed = () => {
  element.style.backgroundColor = "red";
  element.style.color = "white";
  element.innerHTML = "Red Button";
}

Again, just something to note.


#4

@mtf Thx! This is what I did and got through the exercise ;).


#6

Why the function call after element.onclick = does not need the () as in element.onclick = turnButtonRed(); why does this not work properly? and why do we write the function after the onclick without the ().?


#7

We are registering the event and giving it a callback that will be invoked on the event object, when the node is clicked. What we pass to the listener is just a reference to the function, not the invocation of that function. It is up to the handler to invoke this when that time comes.


#8

Thank you very much! @mtf


#9

Last line (line 9)
element.onclick = turnButtonRed;

I thought it must be
element.onclick = turnButtonRed();
since it was a function declaration in the lines before that (and not a function expression, i.e turnButtonRed is not a variable name)

or am I forgetting something? :flushed:

oh now that I’ve seen @mtf 's response…I’m still wrapping my head around it but thank you all :sweat_smile::sob: