Printing each value of an array on a separate line

问题:

I have a program that involves Javascript to allow for interaction with a webpage. It's a baseball site so what I am doing is prompting the user to enter a month. The user can enter a number, like 6 for June, or the name of the month itself and the program will display all the games they are playing that month.

The way I did this was to create an array and store it with the game information. So the month of July would look something like this:

if(month == 7)    // July
{
    var gamesPlayed = ["7/1/16: Team1 @ Team2", "7/3/16: Team2 @ Team 4",
                       "7/4/16: Team3 @ Team2" , ... ,etc, ...];
}

In my main function (the one that executes when I push the Submit button), I want to print the array.

var schedule = getSchedule(July);

for(var i = 0; i < schedule.length; i++)
{
    document.getElementById("result").innerHTML = schedule[i] + "<br />";
}

For some reason this does not work. All it does it print the very last value in the array and not the whole thing. How come it is not printing the whole array? I tried to do document.write(schedule[i] + "<br />"); and that didn't do what I wanted. It printed it, but it printed it on a page by itself to where I couldn't time in a new month or go back to a homepage, etc. Is there a way to get this to print all the elements and not just the last one?

回答1:

You can use .join() to combine the array into one string, and separate each entry by <br>:

document.getElementById("result").innerHTML =
  schedule.join("<br>");

There's no need for the self-closing / in <br>. More important, there's no need for the for loop. That code above will do the whole thing.

If you want a <br> after the last entry, just add it:

document.getElementById("result").innerHTML =
  schedule.join("<br>") + "<br>";

回答2:

While Pointy's answer is correct it does not explain why your code is not working. I'll try and explain:

The error is in this for loop and how you are using innerHTML.

for(var i = 0; i < schedule.length; i++)
{
    document.getElementById("result").innerHTML = schedule[i] + "<br />";
}

Basically, on each iteration of the loop you are resetting the HTML of the result element instead of appending to it. The following small change is all that would have been needed.

for(var i = 0; i < schedule.length; i++)
{
    document.getElementById("result").innerHTML += schedule[i] + "<br />";
}

However, Pointy's answer is more efficient for sure.