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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
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.
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 ?
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);
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.
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.
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
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.
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.
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!