Build a Music Player - Step 20

JavaScript
1

Tell us what’s happening:

Hey, sorry but I do not understand this step.
I have tried to add an eventListener to a "song " element That does not exist.
Ive done addEventListener(“click”, playSong(n))
Ive tried song.addEventListener(“click”, (n) => {playSong(n)})
Its saying that n is the id attribute of song.
Ive tried several more things and they are just me throwing things and hoping they stick really.
Am i to create a few variables beforehand and then run that?
Reading this feels like I skipped a step but I did 19 and that was fine.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

songs.forEach((song) => {
//I reset the step

});

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Challenge Information:

Build a Music Player - Step 20

Github Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-music-player/67594f37fa0c684835f1b064.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

hello!

you are trying to add the event listener to song, but you are supposed to add the event listener to the button element which is a child of song.

3

Okay so ive tried two methods.

const songs = document.querySelectorAll(".playlist-song");

songs.forEach((song) => {
  const btn = song.querySelector("button");

  btn.addEventListener("click", () => {
    playSong(song.id);
  });
});

songs.forEach((song) => {
  const btn = song.querySelector("button");

  btn.addEventListener("click", () => {
    const id = song.id;          
    const n = Number(id("-"));

    playSong(n);
  });
});

I am not sure if the second one is close but after reading and rereading the assignment its all I can think might be what its saying to do.
If it is close to the second one I feel the way it is written is more complicated than it needs to be.
Felt like I had an epiphany when I read it again and thought I understood it finally.

4

what are you trying to do here?

where do you find the id of the songs? does it need to be a string or number? those are things you need to answer before writing the code

5

Add a console.log(id) before using it (before the const n = ... line), and click the any song from the preview to see value of id in the console.

If you click the 3rd song, for example, it will be something like song-2 in the console.

So the value of id is song-2 for this song - 2 being the index of the song in the allSongs array, right?

now you need to call playSong and pass the index of the song (in this case - 2) in the number format.

So the first thing you have to do is to figure out how to extract the "2” part from the "song-2”

6

got it with a thanks.
I am unsure if its just me but I had a really hard time with the wording. Knowing the answer I see what it was saying but while working it out it was a genuine struggle to understand what was being asked.

Thanks again

7

Thanks as always. I managed to get the answer. Grabbed the split by index