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

JavaScript
1

Tell us what’s happening:

I want to see the value i.e songs store in songsHTML or playlistsongs.

how can I see the value stored in them . It helps to understand better the logic behind code. I tried to console them out but it didn’t worked.
Thanks

Your code so far

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


/* file: styles.css */


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



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

Challenge Information:

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

2

songsHTML is an array. So to see its values you need to create a loop to go through every string in the array and log it.

Edit: correction: songsHTML -was- an array back in step 24 i think.
In step 26 it is a string, so you can just print it with console.log as usual.

4

hi there!
post your code here.

5 
})
.join("");

playlistSongs.innerHTML = songsHTML;
let x = “”;
for (const b of playlistSongs.value){
x=x+b;
}
console.log(x)
};
it is just error and trial . this code is written within renderSongs function

6

if you’re in step 26, then just write
console.log(songsHTML);

and put that line above line 108 (so on line 107). Line 108 says:
playlistSongs.innerHTML = songsHTML;

1 Like
7 
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("");

above is the complete renderSongs function.

8

Worked thanks but I was doing it earlier also dont know why it didn’t consoled.

thanks

1 Like
9

i wonder if you had it outside the scope?

10

no it was inside the scope i checked many times , inside the scope it was consoling nothing

11

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