FAQ: DOM Events with JavaScript - Event Handler Registration

This community-built FAQ covers the “Event Handler Registration” exercise from the lesson “DOM Events with JavaScript”.

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

Web Development

FAQs on the exercise Event Handler Registration

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!

The Learn pane contains this sentence: “When you create an event handler function on a specific event, you create a property of the event object.”

And this is the following sentence: “An event handler function is registered as a property attached to the DOM element being interacted with, or the event target .”

They appear to be contradicting one another? Are event handlers registered as properties on the event object, or on the event target?

5 Likes

Hi Vrrajkum,
I am also reviewing this topic also. It becomes very important when you start the project because the instructions uses this language/syntax to guide you through the project. I am breaking apart the syntax now to see if I get a better understanding. I agree with your comment. There seems to be a contradiction in the statements.

WE change the value of the display property of the moreInfo element to ‘block’, which makes it visible.
It looked for the value it had before and inspected the element in the browser console.
In the HTML, I found the #moreInfo element, and its style info on the right says that its display property is found in line 39 of the stylesheet (see screenshot 1).

However, in the style editor, line 39 holds information for some different element (see 2nd screenshot).

Generally, where do I need to look to examine the CSS that applies to a specific element?

1 Like

The last paragraph of this lessons explanation goes as follows:

Event handlers can also be registered as an HTML element attribute, but you should always avoid inline JavaScript code in HTML files!

I found this kind of vague and didn’t quite grasp what was meant. I’d be very grateful for a clarification.

I know this question is in itself also a bit vague, but I decided to ansk anyways, thinking others may also benefit from potential answers.

Thanks! :wink:

1 Like

I do not know the answer to this, and I am also curious to find out, but I came to understand that the keyword this in an event handler function happens to refer to the target element.

This leads me to believe, that the function becomes registered as a property of the event target.

Again, I do not know the answer, this s just a conjecture and I hope I haven’t made things worst.

I hope we get a real answer here! :slight_smile:

I guess the text of the lesson has been changed. I couldn’t find this line anymore. @mtf

There are three ways to bind a event to an element:

  1. HTML event handlers,
  2. ‘Traditional’ DOM event handlers
  3. DOM Level 2 event listeners.

HTML event handlers are registered as element attribute directly in HTML and it a practice that should be avoid like writing directly CSS in HTML cause of the separation of concerns.

An HTML event handler looks like this:

`<button onclick="dosomething()" type="button">Click Me!</button>`

You can find a pretty exhaustive answer of the topic in this answer to a similar question in stackoverflow.

Otherwise as a reference you can read the very first pages of the 6 chapter of Duckett’s “JavaScript & JQuery” (2014), and in particular p. 250 of that edition.

2 Likes

I took a deeper look at CSS file of this exercise and in the css declarations of the id-selector info and more info display: block is repeated two times. Does this mean anything? Or is it just an error?

body{
  margin: 0;
  padding: 0;
  font-family: 'Nunito';
}
#container{
  background: #141c3a;
  margin: 0;
  display: block;
  float: left;
  width: 100vw;
  height: 100vh;
}
#read-more{
  width: 200px;
  height: 50px;
  font-size: 24px;
  border: none;
  display: block;
  background-color: #6df0c2;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
#info, #more-info{
  **display: block;**
  margin: 0 auto;
  width: 350px;
  height: 120px;
  padding: 20px;
  font-size: 20px;
  text-align: center;
  **display: block;**
  background-color: #fd4d3f;
  color: white;
  margin-top: 20px;
}
#more-info{
  display: none;
}

I’m asking cause the event handler works on changing the specific value of display of #more-info. Maybe @mtf?

It is as one suspects, an error, though of no consequence. One of those can be removed.

There have been some changes, albeit I’ve not got around to seeing what those changes were. We are volunteers and only partially in the loop.

I have tried replicating this kind of div toggle with my own project but I can’t seem to get it to work. Can anyone advise?

let mapActon = document.getElementById(‘#map’);
let clicky = document.getElementById(‘#clickmap’);

function showMap() {
if (mapActon.style.display === ‘none’) {
mapActon.style.display = ‘block’;
}
}

clicky.addEventListener(‘click’, showMap);

Hi! I have seemingly completed the exercise correctly, but the site isn’t behaving as expected. The moreInfo element is displaying as soon as I run main.js, rather than after clicking the readMore element.

Here’s my code in main.js

let readMore = document.getElementById('read-more');
let moreInfo = document.getElementById('more-info');

function showInfo(){
  moreInfo.style.display = 'block'
};

readMore.addEventListener('click',showInfo())

The only error message in the console is:

Failed to load resource: the server responded with a status of 404 ()

We want the handler to run when the event is fired, not when we register it. That means giving only the reference, not the invocation.

('click', showInfo)
2 Likes

Thanks, that’s super helpful!

1 Like

I think you can fix this by removing the #s in your two .getElementById() methods. This particular method asks you to pass the ID of the element, not a CSS selector for the element.

I am curious as to why .addEventListener() requires the reference but not the invocation of the handler function? This seems to go against the general pattern of higher-order functions in JS?

In fact it goes with the grain, it just defers invocation until there is an event object to act upon. That doesn’t happen until the event triggers the handler.

2 Likes

I tried to use arrow functions for this but it does not accept, why is this?
This is what I have, only difference from solution is it’s arrow function

let readMore = document.getElementById('read-more');
let moreInfo = document.getElementById('more-info');

// Write your code here:
function showInfo = () => {
  moreInfo.style.display = 'block';
}

readMore.addEventListener('click', showInfo);

Arrow function starts with const or let instead of “function” keyword.

Hi, Why would I use .addEventListener instead of .onclick?

1 Like