onchange javascript code not working in Internet Explorer

[pgmarco]

My JavaScript code works in all browsers except ie, I am not sure why. Any help is appreciated, Thank you.

Website is http://illcomputers.comyr.com/custom.php

Javascript Filehttp://illcomputers.comyr.com/scripts/lowendcost.js

JavaScript Code

function updatecost1() {
		
		const keymouse = 40;
		const Case = 55;
		var data = document.getElementById("data");
		var seldata = data.selectedIndex;
		var cpu = document.getElementById("cpule");
		var selcpu = cpu.selectedIndex;
		var mem = document.getElementById("memorylemr");
		var selmem = mem.selectedIndex;
		var video = document.getElementById("videole");
		var selvideo = video.selectedIndex;
		var os = document.getElementById("osle");
		var selos = os.selectedIndex;
	    var sound = document.getElementById("soundlemr");
		var selsound = sound.selectedIndex;
		var dvd = document.getElementById("dvdwrite");
		var seldvd = dvd.selectedIndex;
		var floppy = document.getElementById("floppy");
		var selflpy = floppy.selectedIndex;
		var power = document.getElementById("power");
		var selpower = power.selectedIndex;
		var monitor = document.getElementById("monitor");
		var selmon = monitor.selectedIndex;
		var speakers = document.getElementById("speakers");
		var selspeakers = speakers.selectedIndex;
		
		
		if (0 == selcpu) {
				var cpule = 80;
			}
			else 
			{
				var cpule = 160;
			}
			
		if (0 == selmem) {
				var memle = 30;
			}
			else if (1 == selmem)
			{
				var memle = 50;
			}
			else
			{
				var memle = 60;
			}
		if (2 == selvideo) 
			{
				var boardle = 65
				var videole = 40;
			}
			else if (1 == selvideo)
			{
				var videole = 0;
				var boardle = 115;
			}
			else if (0 == selvideo)
			{
				var videole = 0;
				var boardle = 65;
			}
			
		if (0 == selsound) {
				var soundle = 0;
			}
			else 
			{
				var soundle = 70;
			}
		if (0 == selos) {
				var osle = 125;
			}
			else if (1 == selos)
			{
				var osle = 80;
			}
			else
			{
				var osle = 135;
			}
		
			if (2 == seldata) {
				var datacost = 70;
			}
				else if (3 == seldata)
			{
				var datacost = 95;
			}
				else 
			{
				var datacost = 45;
			}
			
			if (0 == seldvd) {
				var dvdcost = 30;
			}
				else 
			{
				var dvdcost = 40;
			}
			
			if (0 == selflpy) {
				var flpycost = 0;
			}
			else 
			{
				var flpycost = 25;
			}
			
		if (0 == selpower) {
				var pwrcost = 28;
			}
			else if (1 == selpower)
			{
				var pwrcost = 35;
			}
			else
			{
				var pwrcost = 60;
			}

		if (0 == selmon) 
			{
				var mntrcost = 0;
			}
			else if (1 == selmon)
			{
				var mntrcost = 170;
				speakers.disabled = true;
			}
			else if (2 == selmon)
			{
				var mntrcost = 120;
			}	
			else
			{
				var mntrcost = 180;
			}

		if (0 == selspeakers) {
				var speakerCost = 0;
			}
			else if (1 == selspeakers)
			{
				var speakerCost = 20;
				 
			}
			else
			{
				var speakerCost = 40;
			}
			
		var mainitems = datacost + dvdcost + keymouse + flpycost + pwrcost + mntrcost + speakerCost + Case;
		var lowitems = cpule + memle + videole + soundle + boardle + osle;
		var total = mainitems + lowitems;
		document.getElementById("amt1").value = "$" + total.toFixed(2);

<select name="cpule" id="cpule" onchange="updatecost1();">
					<option name="coreDuo27" value="Core 2 Duo 2.7" onchange="updatecost1();">Intel Core 2 Duo 2.7Ghz</option>
					<option name="coreQuad26" value="Core 2 Qaud 2.6" onchange="updatecost1();">Intel Core 2 Quad 2.6GHz</option>
				</select>

...

            <tr>
              <td class="total" name="total" id="total" > Grand Total&nbsp;</td>
              <td><input name="amt1" id="amt1" type="text" readonly /></td>
              <td><input name="amt2" id="amt2" type="text" readonly /></td>
              <td><input name="amt3" id="amt3" type="text" readonly /></td>
			</tr>

[hielo]

change your SELECT to:

<select id="cpule" onchange="updatecost1();">
	<option value="Core 2 Duo 2.7">Intel Core 2 Duo 2.7Ghz</option>
	<option value="Core 2 Qaud 2.6">Intel Core 2 Quad 2.6GHz</option>
</select>

[Taywin]

In other words, you use 'onchange' only in select tag, not in option tags.

[Cornwell]

I don't know if that fixed it, but the problem may lie in your last two lines:

var total = mainitems + lowitems;
document.getElementById("amt1").value = "$" + total.toFixed(2);

I had almost the same code and discovered the problem was the choice of 'total' as a variable name, and changing it to 'grand' made my code work in Internet Explorer 8. I suspect that total is a reserved name in IE.

[Airshow]

const does not exist in JavaScript. Use var .

Problem: Translating selectedInexes into values in javascript will work, but consider then adding/removing an item to/from a select menu. The javascript would need to be amended in sympathy.

Solution: Put price data in the options (eg. in a custom "price" attribute) such that prices move up/down when items are added/removed. An extra advantage is that the javascript becomes much simpler - just read price data from the selected option, eg.:

var data = document.getElementById("data");
var seldata = data.selectedIndex;
var dataPrice = Number(data[seldata].price);

If it is important for the HTML to validate (eg when using a "strict" doctype), then you have to avoid custom attributes. In that case, you can encode price in eg. the value attribute or name attribute in such a way that it can be stripped out and used. [B]total[/B] is not normally given as a reserved word in javascript (see here for example) but maybe MS have made it so in IE8. That's something for me to test next time I get the chance. Thanks for the heads-up Cornwell.

Airshow