Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Two-Dimensional Arrays

Does not attach to listDiv but goes in body

seems to go in the body. How can i change this. thanks

Wtf. geoff t, is that you down-voting the answers or some trigger-happy moderator?

Sorry think that was me by mistake not used the forum part of the site before

now i know what what there for :)

3 Answers

Hi Geoff,

document.write() doesn’t do what you think it does; in effect, it just replaces whatever is currently loaded in the document. Also, you don’t really need to use a function here — check out the Array#forEach() API. What you really want to do is this:

var playList = [
  ['I Did It My Way','Frank Sinatra'],
  ['Respect','Aretha Franklin'],
  ['Imagine','John Lennon'],
  ['Born to Run','Bruce Springsteen'],
  ['Louie Louie','The Kingsmen'],
  ['Maybellene','Chuck Berry']
];

// Store a reference to the #listDiv element
var $listDiv = document.getElementById('listDiv'),
        // Create an 'ol' element
        $ol = document.createElement('ol');

// This is a way easier and readable way of iterating through an array
playList.forEach(function (song, index) {
    // for each iteration you:
    // create a brand-new 'li' element
    var $li = document.createElement('li');
    // Add some text to it
    $li.textContent = song[0] + ' by ' + song[1]; 
    // And append that 'li' element to that 'ol' element up there
    $ol.appendChild($li);
})

// finally you append the 'ol' element to the #listDiv element
$listDiv.appendChild($ol);

Let me know if you have any questions.

Dom Talbot
Dom Talbot
7,686 Points

Hey Geoff,

If you want to your printSongs function to output to listDiv, you could do something like:

function printSongs( songs ) {
    var listDiv = document.querySelector('#listDiv');
    var listHTML = '<ol>';
    for ( var i = 0; i < songs.length; i += 1) {
        listHTML += '<li>' + songs[i][0] + ' by ' + '| ' + songs[i][1] +'</li>';
    }
    listHTML += '</ol>';
    listDiv.innerHTML = listHTML;
}
<!-- Also make sure to remove the fixed height -->
<div id="listDiv" style="background-color: #ccc;">
    <!-- printSongs outputs list here -->
</div>

Many thanks both.

Mikis like your answer but abit advanced at moment for me but ill keep it for reference cheers.

can you let me know what the index in the function is used for.

index is just a parameter; I could've named it anything or just left it out. In fact, I probably should have left it out in this case since I ended up not needing it. In any case, the second parameter of that function will always contain the index of the current element — in this case, the index of the current song — being processed. The first parameter of that function will contain the a reference to the current element — in this case, the actual, current song — being processed. And the third parameter contains a reference to the original array that all of this shit is happening upon... but I didn't need it here so I didn't include it.

Hope that made sense. Happy learning ;)

You can read more about how the Array#forEach() method works on the MDN site.