Learn Basic String and Array Methods by Building a Music Player - Step 19

JavaScript
1

#Step 19
Next, you will need to update the playlist in your HTML document to display the songs.

Add songsHTML to playlistSongs, by using the innerHTML property. This will insert the li element you just created into the ul element in the already provided HTML file.

My solution was:
playlistSongs.innerHTML += songsHTML

What is my error? This is the whole function:

const renderSongs = (array) => {
  const songsHTML = array
    .map((song)=> {
      return `
      <li id="song-${song.id}" class="playlist-song">
      <button class="playlist-song-info">
          <span class="playlist-song-title">${song.title}</span>
          <span class="playlist-song-artist">${song.artist}</span>
          <span class="playlist-song-duration">${song.duration}</span>
      </button>
      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
        </button>
      </li>
      `;
    })
    .join("");
    
    playlistSongs.innerHTML += songsHTML; //MY SOLUTION
};

Challenge Information:

Learn Basic String and Array Methods by Building a Music Player - Step 19

1 Like
2

Hello, there’s no need to use a compound assignment operator here, also remove the last curly brace.

1 Like
3

Your solution seems correct, and it should work to update the innerHTML of the playlistSongs element with the songsHTML. The += operator is used to append the new HTML content to the existing content of playlistSongs.

However, it’s important to ensure that the playlistSongs variable is correctly referencing the UL element in your HTML document. Make sure that you have a line similar to the following in your HTML file:

htmlCopy code

<ul id="playlistSongs"></ul>

This assumes that your UL element has an id attribute set to “playlistSongs.” If your UL element has a different id or if it doesn’t have an id at all, make sure to adjust the JavaScript code accordingly.

If the issue persists, you may want to check the console for any error messages or log statements that could provide more information about what might be going wrong. Additionally, ensure that the renderSongs function is being called appropriately with the correct array of songs.

1 Like
4

This sounds sorta like ChatGPT wrote it? If you used ChatGPT to write it, please don’t do that

2 Likes
5

Doesn’t make any sense

6

Hi. Have you solved the issue? The concatenation operator isn’t necessary, you just assign it with a single equal = sign.

2 Likes
8

Thank you. I was able to solve the issue the same day. After taking a break, I reviewed the code and found the mistake.

10

I believed that I needed to “add” the variable to the playlist. So I used += to add it to the HTML instead of directly replacing the innerHTML of the element with the variable. I apologize if I misunderstood; English is not my native language, so I sometimes take words too literally.

1 Like
11

No worries, we’re here to help

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.