Lesson does not explain the addEventListener method.
I was having issues with this step since it says to hook the playButton element, so I assumed to use an onclick like the previous project. It then said to use addEventListener() which has not been brought up previously. I tried to use it, but it does not specify that “click” need to be a string, and that it requires () as another parameter. If more guidance could be added to this step, and explanation on how to use addEventListener(), that would be great.
Spoiler code for step answer:
playButton.addEventListener('click', () => {});
Learn Basic String and Array Methods by Building a Music Player - Step 28
I see the spoiler code for this step is
playButton.addEventListener(‘click’, () => {});
but I don’t understand why empty parenthesis - () in the addeventListener instead of playsong(), please clarify
here is my code: playButton.addEventListener(“click”, playSong() => {});
I also agree that this step is not explained very well. The playSong reference is such a boondoggle. If it isn’t intended for us to use it in this step, then I would expect something like “But first let’s create …” I was Google searching and trying to find something in the MDN or W3 websites.
Agree +1. I’m doing the projects in order and still don’t understand why empty parentheses are used here. My assumption is at some point arrow syntax is used to replace a lot of things we learned previously and it’s causing some confusion. Agree with the above the instructions could be clearer, i.e. “don’t add the playSong function in this step”
I understand the confusion in the new way of writing functions. It took a while for me to get adjusted when I first used them too.
The first few projects focused on traditional function declarations
function myFunction() {
// some code here
}
but the reason for introducing arrow functions in this project, is because they are used a lot in javascript code out in the wild. So it is important to learn about them and be comfortable with the syntax.
There are situations where you might prefer one over the other.
I think this article gives a good intro into those differences
Thank you so much for following up and explaining the arrow functions! I just completed the project and after practicing more in the remaining steps, I feel like I have a better grasp on writing functions in this new way.
The part that is confusing me is that I was under the impression that arrow functions had to be the value assignment of a variable. Is the addEventListener() declaring a new variable or am I just mistaken in my understanding?
const myNamedFunction = () => {
// some code here
};
but sometimes you can use arrow functions as a callback like this
const exampleElement = document.getElementById('demo')
exampleElement.addEventListener('click', () => {
// random code goes here
});
No, the event listener is listening for a particular event.
An example of an event would be a click event. (Ex. when a user clicks on a button)
When a click event is detected, then something should happen.
In this case, you can have a callback function which will execute some code when a click event is detected.
This would be an example of an anonymous arrow function which serves as the callback to this event.
btn.addEventListener("click", () => alert("You just clicked this button"));
If you play around with this codepen example, you will see that each time the button is clicked it will show an alert message.