Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Prints undefined on top of list

After the javascript array lesson in which you print out a playlist to an ordered list in html, I tried to test my self and make one that asks the user for the number of songs they want in a playlist then prompts for the actual songs to be inputed into an array.

Everything works fine but for some reason "undefined" prints out at the top of the list when the script is run and i can't figure out what causing it to place "undefined" before the ordered list in the HTML

/*
program to print out list of set number 
of songs based on user input;
*/
//inital variables;
var numberOfSongs,
    numberOfSongsLeft = 0,
    userPlaylist = [],
    printList;

//Start of function defintions;
//function to ask user number of songs desired in playlist;
function howManySongs() {
    while (isNaN(numberOfSongs)) {
        numberOfSongs = parseInt(prompt('How many songs do you want in the playlist. Enter a number no more than 20'));
        if (isNaN(numberOfSongs)) {
            alert('That is not a number please enter a valid number');
        } else if (numberOfSongs > 20 || numberOfSongs < 1) {
            alert('please enter number between 1 and 20');
            numberOfSongs = 'nan';
        }
    }
    return numberOfSongs;
}
//function to ask user songs based on ammount specifed numberOfSongs;
function gatherUserPlaylist() {
    numberOfSongsLeft += (numberOfSongs - 1);
    var i;
    for (i = 0; i < numberOfSongs; i += 1) {
        userPlaylist.push(prompt('Enter song; you have ' + numberOfSongsLeft + ' songs left to enter'));
        numberOfSongsLeft -= 1;
    }
}
//print to page;
function print(message) {
    document.write(message);
}
//funtion to combine array to <ol> list;
function compiledList(list) {
    printList += '<ol>';
    var  i;
    for (i = 0; i < userPlaylist.length; i += 1) {
        printList += '<li>' + userPlaylist[i] + '</li>';
    }
    printList += '</ol>';
    return printList;
}
//End of functions


howManySongs();
gatherUserPlaylist();
print(compiledList(userPlaylist));
print('<h3> Thank you for entering the songs you want on your playlist all ' + userPlaylist.length + '</h3>');

1 Answer

Hi Christopher,

undefined is being printed to the screen because that is the initial value of printList. Concatenating the ordered list to this variable is not removing the initial undefined value. The fix here is to initialize printList with an empty string.

var printList = '';

Cheers!

Thank you it works fine now. after you pointed out that mistake instead of concatenating the variable i also tried setting it to

 printlist = '<ol>';

and that worked as well. Thank you again.