Detail of the project: -Utilizing a javascript for loop, my program extracts data from an external javascript array titled "arrays.js" and organizes it into an HTML table. The goal is to align the appropriate data under the "Date Name Address Amount" column headings.
Issue: -The data within the array seems to be exceeding its boundaries or rather there are no specific boundaries established within the table headers "Date Name Address Amount". Instead of creating a new entry after the "Amount" header, it simply adds the new record on the same line. I intend for it to wrap back around to start a new record row underneath the "Date" column header so that each date value in the array corresponds with the "Date" header, name value with the "Name" header...etc as shown in the example below... Example: With 4 headers (Date, Name, Address, Amount) I expect the next date entry to appear under the "Date" header. It is currently placing subsequent date values on the same row without transitioning to a new record row. Code provided below. Date Name Address Amount
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Winch - Lab 10</title>
<script src="arrays.js" type="text/javascript"></script>
<script type="text/javascript">
function totalContributions()
{
var totalAmount = 0;
for (var i = 0; i < amount.length; i++)
totalAmount = totalAmount + amount[i];
return totalAmount;
}
</script>
</head>
<body>
<table id="donations">
<tr>
<th>Date</th>
<th>Name</th>
<th>Address</th>
<th>Amount</th>
</tr>
<script>
for (var x=0; x < amount.length; x++){
if (x%2==0){
document.write("<tr>");
} else {
document.write("<tr class='stripe'>");
}
document.write("<td>"+date[x]+"</td>");
document.write("<td>"+firstName[x]+" "+lastName[x]+"</td>");
document.write("<td>"+street[x]+"<br>"+city[x]+","+state[x]+" "+zip[x]);
document.write("<td class='amt'>$"+amount[x]+"</td>");
document.write("</tr)");
}
</script>
</table>
</body>
</html>
**arrays.js**
street = new Array();
city = new Array();
state= new Array();
zip = new Array();
amount = new Array();
date = new Array();
firstName[0]="Ron";
lastName[0]="Burgundy";
street[0]="88 Regal Lane";
city[0]="Williamsburg";
state[0]="KY";
zip[0]="40769";
amount[0]=625;
date[0]="2015-07-18";
firstName[1]="Ricky";
lastName[1]="Bobby";
street[1]="407 Easy Street";
city[1]="London";
state[1]="KY";
zip[1]="40744";
amount[1]=75;
date[1]="2015-07-18";
firstName[2]="Veronica";
lastName[2]="Corningstone";
street[2]="743 Stawlings Drive";
city[2]="Danville";
state[2]="KY";
zip[2]="40423";
amount[2]=50;
date[2]="2015-07-16";
firstName[3]="Brick";
lastName[3]="Tamland";
street[3]="102 Maple Lane";
city[3]="Danville";
state[3]="KY";
zip[3]="40423";
amount[3]=150;
date[3]="2015-07-15";