That's because, if you left the div in, ID's are supposed to be UNIQUE and it likely encountered the div first. If you're running the FireFox Error Console (which you should) it will probably kick an error, a div has no value, and an input field - which does have a value - is not a container and has no innerHTML.
Do you not want it in the aggregate field? If so just do this.
//divobj.innerHTML ="Total Price For Cake $"+totalAggregate;
document.getElementById('aggregrate').value ="Total Price For Cake $"+totalAggregate;
Or, create new field that is not id'ed as "totalPrice".
EDIT: Lots of stuff here going sideways, try this.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
// I have no idea why you need this but this is how you'd do it
// It still gives you 0...6 for their index
// grade1_aggregrate = ["None","A","B","C","D","E","F"];
//This is what I think you meant . . .
prices = {
'None':'0.00',
'A':'6.50',
'B':'8:25',
'C':'9.32',
'D':'9.79',
'E':'10.45',
'F':'11.57'
}
//
// Attact the action to the select, say no to inline JS
window.onload=function() {
document.getElementById('grade1').onchange=function() { calculateTotal(); };
};
//
function getGrade1Aggregate(){
var formGrade1Aggregate=0;
var sel = document.getElementById('grade1');
formGrade1Aggregate = sel.options[sel.selectedIndex].value;
return formGrade1Aggregate;
}
//
function calculateTotal() {
var totalAggregate = getGrade1Aggregate();
var fld = document.getElementById('MyTotal');
var divobj = document.getElementById('totalPrice');
if (fld) { fld.value = prices[totalAggregate]; }
else if (divobj) {
divobj.style.display='block';
divobj.innerHTML ="Total Price For Cake $"+prices[totalAggregate];
}
}
</script>
</head>
<body>
<p><select name="grade1" id="grade1">
<option value="None">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<label for="aggregate">Overall Aggregate</label>
<input name="aggregrate" type="text" size="10" value="" id="aggregrate"></p>
<p><label for="MyTotal">Total Price For Cake $</label>
<input type="text" name="MyTotal" id="MyTotal" value=""></p>
<div id="totalPrice"></div>
</body>
</html>
Note the doctype, don't know why everyone uses XHTML when they don't really mean it . . .
To revert to the current method of writing to the div, just comment out the field,
<!-- <p><label for="MyTotal">Total Price For Cake $</label>
<input type="text" name="MyTotal" id="MyTotal" value=""></p> -->
Or remove it.
|
