Build a Music Player - Step 20

JavaScript
1

Tell us what’s happening:

I can’t pass this level!
I didn’t understand the “Audio and Video” lecture at all!
I’m so confused!

I wrote these codes using “Chat GPT” :sweat_smile:
But it doesn’t work.

Your code so far

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


/* file: styles.css */


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

songs.forEach((button) => {
  button.addEventListener('click', () => {
    const ss = button.closest('.playlist-song');
    const idString = ss.id;
    const id = parseInt(idString.split('-')[1]);
    playSong(id);
  });
});

// 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/138.0.0.0 Safari/537.36

Challenge Information:

Build a Music Player - Step 20

2

hi there,

Instead of asking us to fix ChatGPT’s code, would you mind going back and clearing the code and starting this challenge again?
Once you have your own code that you understand, even if it doesn’t work, we can help you fix it up.

If you also happen to have a specific question about something you read that you didn’t understand, please feel free to tell us what it is that we can clarify for you.

1 Like
3

Sure. I’ll do it and tell you about result soon…

4

I’ve come this far for now:

songs.forEach((song) => {
  const n = Number(song.id.match(/\d+/));
  playButton.addEventListener('click', playSong(n));
});

I think I need to focus on this now. Isn’t it?

Step 20 Guide:
For that you’ll need to add an event listener for the click event on each button element which is a child of a song element.

5

you need to call playSong “inside the callback of the event listener”

the issue is that the event listener expects a function as second argument, you are giving it the output of a function instead

2 Likes
6

I am here now:

songs.forEach((song) => {
 const n = Number(song.id.match(/\d+/));
 let btn = document.querySelector(`#${song.id} button`);
 btn.addEventListener('click', playSong(n));
});
7

please check my message above, it is valid also for your updated code

2 Likes
8

Thank you. I passed this step! :sweat_smile:

3 Likes