Build a Music Player - Step 20

[abhatia08]

Tell us what’s happening:

Please help in resolving the issue. I have no idea what I’m doing wrong…

Your code so far

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

/* file: styles.css */

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

songs.forEach((song) => {
  const button = song.querySelector('button')
  button.addEventListener("click", () => {
    const idString = song.id.split('-')[1]
    const id = Number(idString)
  })
  playSong(id)
});

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Challenge Information:

Build a Music Player - Step 20

freeCodeCamp.org

[anon75571083]

Hi @abhatia08

I’ll give you a couple hints.

Look at what your event listener is doing when the button is clicked.

  button.addEventListener("click", () => {
    const idString = song.id.split('-')[1]
    const id = Number(idString)
  })

It declares 2 variables. It doesn’t do anything else. So when you click on a song, 2 variables are created.

Now look at your loop,

songs.forEach((song) => {
  const button = song.querySelector('button')
  button.addEventListener("click", () => {
    const idString = song.id.split('-')[1]
    const id = Number(idString)
  })
  playSong(id) // <----- this runs in each iteration of the loop.
});

At the end of each loop you are calling a function to play the song.

So, in summary, you’re creating event listeners that do nothing but create variables that are used for nothing. And at the same time you are playing every song.

There’s just one small change needed here.

[abhatia08]

I placed the playSong(id) inside the for loop and it passed. Thanks!

[anon75571083]

I think you mean you placed it inside the event listener callback function.

  button.addEventListener("click", () => {
    const idString = song.id.split('-')[1]
    const id = Number(idString)
   //    <--------------- here ?
  })

here , right?

[abhatia08]

Yes, inside the event listener function. Sorry!