Transversing an array to get the contents to the screen using innerHTML

When collecting the data from an array, you will overwrite the id in the html each time the loop goes through an index of the array

Using an exaple of a weekday array

function buildArray(){
var weekArray = new Array ('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday');
return weekArray;
}

The first function shows the problem

function outputArrayError(anArray){
for(var i = 0; i< anArray.length; i++){ // where i is the index of the for loop and the array
document.getElementById('result1').innerHTML = anArray[i]+ "<br />" ; // puts data from array into html page
}
}

The second function shows a solution

function outputArrayCorrect(anArray){
var outputOfArray = ""; // a variable to store output (like a buffer) from array as it transverses
for(var i = 0; i< anArray.length; i++){ // where i is the index of the for loop and the array
outputOfArray = outputOfArray + " " + anArray[i] + "<br />" ; // appends array data to variable so it gets bigger with each iteration
}
document.getElementById('result2').innerHTML = outputOfArray;// outputs the entire array to screen
}

The main function calling the functions above is shown below:

function mainFunction(){//triggered from html
var weekdayArray = buildArray(); // create an array
outputArrayError(weekdayArray); // send array to function which outputs to screen
outputArrayCorrect(weekdayArray); // send array to a second function which outputs to screen
return false; // added to end to stop html form from submitting...
}

Result from the first function appears below:

Result from the second function appears below: