I am creating a program that will store values from the text boxes into an array and display them in a tabular format that adds the total miles together. The total miles will then highlight the the miles table with the color of the miles. I still have to add code for highlighting the miles. But I am having difficulty with getting my array to show my values and display them in a separate table.
<!DOCTYPE html>
<html>
<head>
<title>Flight Class Member</title>
<style>
.bronze {
background: rgb(80.4, 49.8, 19.6);
}
.silver {
background: silver
}
.gold {
background: gold
}
</style>
<script type="text/javascript">
var x = 0;
var array = Array();
function CalculateMember()
{
array[x] = document.getElementById("flightNumber").value;
alert("Flight Number: " + array[x] + " Added at index " + x);
x++;
array[x] = document.getElementById("miles").value;
alert("Miles: " + array[x] + " Added at index " + x);
x++;
document.getElementById("flightNumber").value = "";
document.getElementById("Miles").value = "";
}
function DisplayMember()
{
var f = "<hr/>";
for (var y=0; y<array.length; y++)
{
f += "Flight Number " + y + " = " + array[y] + "<br/>";
}
document.getElementById("Result").innerHTML = e;
var m = "<hr/>";
for (var y=0; y<array.length; y++)
{
m += "Miles " + y + " = " + array[y] + "<br/>";
}
document.getElementById("Result").innerHTML = e;
}
function highlightWeightClass(classMember) {
var rows = document.getElementById("MemberTable").rows;
rows[0].className = classMember < 10000 ? ".bronze" : "";
rows[1].className = classMember >= 10000 && classMember < 25000 ? ".silver" : "";
rows[2].className = classMember >= 25000 ? ".gold" : "";
}
</script>
</head>
<body>
<h1>Find out what Flight Class Member you are!</h1>
<p>To use, please input the flight number and number of miles and press calculate<p>
<form name="BMICalculator">
Flight Number:
<input type = "text" id="flightNumber" name="flightNumber" value="" /><br />
Number of Miles:
<input type = "text" id="miles" name="miles" value="" /><br />
<input type = "button" id="calculate" name="Calculate" value="Calculate" onclick="CalculateMember();" />
<input type = "button" id="display" name="Display" value="Display" onclick="DisplayMember" /><br />
<br>
<div id="Result"></div>
<br>
Class Member:
<input type = "text" id="classMember" name="classMember" value="" /><br />
<br>
<table id="MemberTable" style="width:100%", border="1px solid black">
<tr>
<td>Bronze Member</td>
<td><10000 miles flown</td>
</tr>
<tr>
<td>Silver Member</td>
<td><25000 miles flown</td>
</tr>
<tr>
<td>Gold Member</td>
<td>>25000 miles flown</td>
</tr>
</table>
</form>
</body>
</html>
