JavaScript JavaScript Arrays Multidimensional Arrays Create a Multidimensional Array

Esther AlQaisi
Esther AlQaisi
2,311 Points

"My Music Playlist" heading not showing

Anyone know why the My Music Playlist isn't showing? I updated it in the index.HTML file

const playlist = [
  ['So What', 'Miles Davis', '9:04'],
  ['Respect', 'Aretha Franklin', '2:04'],
  ['What a Wonderful World', 'Louis Armstrong', '2:21'],
  ['At Last', 'Ella Fitzgerald', '4:18'],
  ['Three Little Birds', 'Bob Marley and the Wailers', '3:01'],
  ['The Way You Look Tonight', 'Frank Sinatra', '3:21']
];

//let myArtists = `${playlist[0][1]}, ${playlist[1][1]}, ${playlist[5][1]}`;

function createListItems( arr ) {
  let items = '';
  for ( let i = 0; i < arr.length; i++ ) {
    items += `<li>${ arr[i][0] }, by ${ arr[i][1] } - ${ arr[i][2] }</li>`;
  }
  return items;
}

document.querySelector('main').innerHTML = `
  <ol>
    ${createListItems(playlist)}
  </ol>
`;

Mod edit: added markdown for code formatting. Check out the "markdown cheatsheet" linked below the comment box for tips on how to format your posts.

1 Answer

Cameron Childres
MOD
Cameron Childres
Treehouse Moderator 11,695 Points

Hi Esther,

My guess would be that you have the heading inside of your <main> element. Setting the innerHTML property replaces all HTML inside of the element which would overwrite it. If that's the case just place your heading before <main> and it won't be overwritten. If it's not inside the element please post your HTML so I can have a look.