Hi I am having a problem with getting my output to display a dollar sign. I have the program running the way it is supposed to, it just won't format for currency. I have tried a couple of different methods and do not understand why the current code does not work. Could someone explain it to me?Any help will be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitonal//EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welcome to Burger Barn</title>
<script language ="javascript" src ="formatDollar.js"></script>
<script>
var banners = new Array("food2.jpg","catering3.jpg","catering4.jpg","catering6.jpg")
var bnrCntr = 0;
//rotates banner images
function bancycle()
{
if (bnrCntr == banners.length) {
bnrCntr = 0
}
document.Banner.src = banners[bnrCntr];
bnrCntr = bnrCntr + 1;
setTimeout("bancycle()",3000);
}
function submitOrder()
//meals array
{
var arrMealCosts = new Array(3);
arrMealCosts[0] = "1.99";
arrMealCosts[1] = "2.19";
arrMealCosts[2] = "2.99";
arrMealCosts[3] = "1.09";
//sides array
var arrSidesCosts = new Array(4);
arrSidesCosts[0] = ".89";
arrSidesCosts[1] = "1.05";
arrSidesCosts[2] = "1.50";
arrSidesCosts[3] = ".50";
arrSidesCosts[4] = "2.09";
var barnSize;
var meal;
var side;
var mealPrice;
var sidePrice;
var sizePrice;
var totalPrice;
//checks to see if order has been barn sized
if(document.getElementById("yesBtn").checked)
{
barnSize = 1;
}
else
{
barnSize = 0;
}
//gets values from array's and does calculation
document.getElementById("total").value =parseFloat(arrMealCosts[document.getElementById("meal").value-1]) +parseFloat(arrSidesCosts[document.getElementById("side").selectedIndex]) + barnSize;
document.getElementById("total").value = "$" + total.toFixed(2);
//document.getElementById("total").value = "$" + total;
}
</script>
</head>
<body onLoad="bancycle()">
<h3><font color="#008000">Welcome to Burger Barn!</font></h3>
<p><img border="0" src="images/catering3.jpg" width="128" height="94" name="Banner"></p>
<p>Please enter your order using the form below:</p>
<form id ="meals" name ="formOrder" method="post" action="">
<p>Which Barnyard Meal would you like:
<input type="text" name="meal" size="5" value ="0" id ="meal">
</p>
<div align="center">
<center>
<table border="0" width="88%">
<tr>
<td width="16%"><b>1</b> <br>
2-Hamburgers $1.99 </td>
<td width="16%"><b>2</b> <br>
2-Cheeseburgers $2.19</td>
<td width="17%"><b>3</b> <br>
2-Barnburgers $2.99</td>
<td width="17%"><b>4</b> <br>
1-Hamburger $1.09</td>
</tr>
</table>
</center>
</div>
<p>What Side would you like with this order?
<select size="1" name="side" id="side">
<option >French Fries $ .89</option>
<option >Onion Rings $1.05</option>
<option >Baked Beans $1.50</option>
<option >Corn on the Cob $ .50</option>
<option >Salad $2.09</option>
</select>
</p>
<p>Would you like to BARN SIZE your order? Yes:
<input type="radio" value="V3" name="R1" id ="yesBtn">
No:
<input type="radio" name="R2" value="V4" id ="noBtn">
</p>
<p>Your Total Order comes to:
<input type="text" name="T3" size="20" id ="total">
</p>
<p>PLEASE PAY BEFORE DRIVING AWAY!!!</p>
<p>
<input type="button" value="Submit Order" name="B1" onClick = "submitOrder()">
<input type="reset" value="Clear Order" name="B2">
</p>
</form>
<hr>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>
<hr color="#0000FF">
<p align="center"><i><font size="2">contact Jeff Gullion for any questions or
problems: </font></i> <a href="mailto:jhgullion@dmacc.edu">jhgullion@dmacc.edu</a></p>
</td></tr></table></body>
</html>