FAQ: DOM Events with JavaScript - Event Object Properties

This community-built FAQ covers the “Event Object Properties” 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 Object Properties

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!

// Write your code below
let sharePhoto = function(event) {
event.target.style.display = ‘none’;
text.innerHTML = 'You share the puppy in ’

  • event.timeStamp + ’ ms.’;
    }

share.onclick = sharePhoto;

Confused about how this function works - why don’t you have to pass a parameter into sharePhoto even though we created one in the function?

4 Likes

In JavaScript , whether using traditional event handlers, or DOM events , event handlers are attached to their relevant object as a reference to the function. In standards compliant browsers, when the event fires, the function is executed as a method of the object, and passed a single parameter ; the event object.

You may execute the function like this, where this refers to the object in reference, which is the element, not the event.

let sharePhoto = function() {
this.style.display = ‘none’
text.innerHTML = event.timeStamp;
}

share.addEventListener(‘click’, sharePhoto)

or, you can execute the function as such, including the implicit element in the event handler

let sharePhoto = function(event) {
event.target.style.display = ‘none’
text.innerHTML = event.timeStamp;
}

share.addEventListener(‘click’, sharePhoto)

5 Likes

I dont really understand what happened.
It says I did all correctly, but I dont see the text of miliseconds.

1 Like

Same issue. I don’t see the difference.

I don’t understand the logic of this exercise ? I finish it but can not understand it at all.
First i see there is 3 variables. And one function with a parameter. When we call the function we not pass any parameters inside…

Inner HTML change the text in text variable.
What is the purpose of event.target ?

1 Like

4.5 months, there is still no display of the timeStamp ?

I see a lot of questions on here and although I am no expert in JS I think I understand what is going on here. One of the questions we see is that we are passing in this function sharePhoto() with no argument/parameter. When we give a function to an event handler (in this case our click event handeler) we can’t conventionally provide it a function with arguments. That is to say that we can’t do something like this:
share.onclick = someRandomFunction(param1, param2);
What this does is it will call the function someRandomFunction() and then assign share.onclick to the value of whatever someRandomFunction returns. This is because when we add the () after the name of the function we are infact invoking a call to that function. There are ways around this to pass arguments to an event function but for the purposes of this exercise we need to know that we can’t conventionally pass in arguments like that. We can only assign the onclick function to our function like this:
share.onclick = sharePhoto; //notice no () which means we are assigning onclick to the function and not the value the function returns.
However when we do this method we actually do get one argument passed implicitly which is the event object. When we define:
let sharePhoto = function(event){}
We are taking into account that the onclick will implicitly give our sharePhoto function an event as an argument. Like I stated above we can’t use normal arguments so it’s safe for the computer to automatically pass it an event object and it won’t interfere with any other parameters because there can’t be any arguments.
We can then use that event parameter in our function assuming it has been implicitly passed by our event handeler and extract the properties from it. In our case we want the target which is the HTML element that triggered the event to happen (in this case the share button), and the timestamp which will be the time we clicked on the button. To access these properties we can simply use the “.” operator and the event object like so:
event.target.style.display = “none”; //gets the HTML element from event via target
text.innerHTML = event.timeStamp; //which will get the time from the event.

TLDR:
We provide the parameter in the sharePhoto() function because eventHandelers will implicitly(automatically) pass the event object when called. So that’s why we only write:
share.onclick = sharePhoto;
Instead of:
share.onclick = sharePhoto(event);

12 Likes

I agree. The lesson didn’t really talk us through the properties and left us to look through the documentation, which I felt was lacking too

4 Likes

I had trouble with this lesson also, and I’m new to JavaScript. Seems like more than a few of us are getting frustrated with some of the JavaScript lessons. This one presents a brand new important concept and does not give EVEN ONE example of how to use it correctly. They give me one paragraph about what it is supposed to do generically that barely makes sense. Then they give me the generic syntax verbatim from the MDN page. This leads to lots of googling around trying to figure out how to actually use it that feels like a waste of time. Maybe that is the point? But I think it would be better to show me the best practices first instead of “Hey just wing it!” To be fair, a lot of the lessons have been very good, but Codecademy has slipped on a few of these JavaScript lessons. End rant.

After struggling with the cryptic “hints” for a while, I realized that modifying the text element was not going to work because it goes away as soon as you click the button! The text element is what says Share before the button is clicked. After the button is clicked the button background is set to white and the social media icons appear. So this means if you want to see event.timeStamp it needs to show up on the social element (not the text element).

This is the code I came up with that did show time to the click event in milliseconds. I had to set the social text color to black because originally it was trying to show white text on a white background.

Hope this helps!

let sharePhoto = event => {
  event.target.style.display = 'none';
  social.style.color = 'black';
  social.innerHTML = event.timeStamp;
};
share.onclick = sharePhoto;
7 Likes

The text element is the correct one to modify.

This is my solution:

let sharePhoto = function(event) {
  event.target.style.display = 'none'; 
  text.innerHTML = event.timeStamp;
}

share.addEventListener('click', sharePhoto);

event.target.style.display make the sharebutton disappear not the text element. With the share button now removed, the social element now appears though you’ve overidden that to give the timeStamp instead.

How it should look:

The only slight issue I had with this, was that I mistakenly put .timestamp instead of .timeStamp though I still managed to complete the lesson (no validation errors from CC), I just ended up with the text field saying undefined

6 Likes

Thank you for pointing out the need for the capital ‘S’ in timeStamp - this solved the missing numbers for me.

When you pass sharePhoto as an event handler using addEventListener, you make sure that, when an event occurs, this function will always trigger with the event as it’s parameter.
All event handlers - as far as I know - take event as their (I think only) parameter.

let sharePhoto = function(event) {
    event.target.style.display = 'none';
    text.innerHTML = event.timeStamp;
};

share.addEventListener('click', sharePhoto);

I used event.target here (event.target.style.display = ‘none’; ), but it would also work like this:

let sharePhoto = function(event) {
    this.style.display = 'none';
    text.innerHTML = event.timeStamp;
};

share.addEventListener('click', sharePhoto);

1 Like

Don’t fully understand the purpose of using properties such as .target, when just prior we learned to write the code as being:

eventTarget.onclick = eventHandlerFunction;

Why make it more complicated?

From what I’ve read using onclick isn’t the best practice - because you can’t add more than one, whereas you can add eventListener more than once and they will all fire.

More to your question, when selecting a group of elements - say with querySelectorAll, you end up with an array of these elements. If you then wanted to iterate over them all with .forEach for example, then now we can say .target to refer to the specific one.

I have made an example with multiple dots on a map, where when you click the dot the text changes. Instead of writing the code for each one, I just selected them all, iterate over them with an event listener, and say to change the text for the target that was selected (as I can’t hardcode it ahead of time, because I won’t know which one will be selected).

I think in general we should get more familiar with using addEventListener rather than onclick.

5 Likes

Heyy justjooshing,

This makes better sense. Thanks for the reply!

Hi! it shows up to me, did you solve it?

Great explanation, this made things clear :slight_smile:

Thanks for pointing the syntax error. It solved the issue for me.
It seems ‘onclick’ is the only exception to camelcase. I frequently write it onClick!

I tried both and neither the event listener nor onclick worked in changing the interface. Help?

let sharePhoto = function(event) {

event.target.style.display = ‘none’;

text.innerHTML = event.timeStamp;

}

share.onclick = sharePhoto();

// share.addEventListener(‘click’, sharePhoto);