Question about the Content Slider you wrote in Animations

[bstagy]

The content slider you created is just brilliant! There is a question I have about the setClickedItem() fx. You’re adding “e” as a parameter, yet when you call the function in the click event listener, no arguments are being passed in parenthesis.
I’m missing something here…Since link.itemID = i; Does that value of i get satisfied as an argument because the activeLink within setClickedItem() is referencing the value of itemID…which is being dynamically set in the event listeners for loop?

[kirupa]

Hi, bstagy!
When specifying an event handler via the addEventHandler function, you don’t have to specify an argument. The setClickedItem event handler gets the e argument populated automatically

The value of i is less an argument and more of a value that happens to be set on the itemID property. Even if nothing gets clicked, the for loop (like you mention) sets the itemID property to whatever number i is at that time. Think of itemID as a permanent addition to our link elements as accessed by: var links = document.querySelectorAll(".itemLinks");

Does that help answer your question?

Cheers,
Kirupa

[bstagy]

Hi Kirupa!
It does for the most part. There are so many little intricacies to JS.
I’m still a bit confused on where the argument gets it’s value from because in your code you have clickedLink = e.target; I’m assuming the e get’s it’s value on the element it’s clicked on, but what if it’s say a ‘scroll’ event or something else? I suppose there are only certain instances when you can pass an argument to a function being called in Eventlisteners.

Best,
bstagy

[kirupa]

Very close! The e is actually the event argument, and every event will pass that event argument object on.

For something mouse related, a MouseEvent object is returned. For a scroll, a ScrollEvent object is returned. Depending on the type of event you are dealing with, the properties that event’s object returns will be different. For example, a MouseEvent object has ways for you to figure out which mouse button was clicked. The target property tells you which element the mouse event was sent from. A ScrollEvent object would tell you things related to the scrolling.

[bstagy]

Kirupa,
Thank you for taking the time to explain. It’s still not exactly clear which is why I think it’s one of those things I just have to play with to better understand. Kind of like ‘this’ .

Brad

[kirupa]

No worries! In case this helps, check out the KeyboardEvent and how you can access its properties here: https://www.kirupa.com/html5/keyboard_events_in_javascript.htm That may help provide more details for my earlier answer

[bstagy]

Awesome thank you Kirupa! I’ll check it out.