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!
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?
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).
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.
There are three ways to bind a event to an element:
HTML event handlers,
‘Traditional’ DOM event handlers
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.
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.
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?
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 ()
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.