How to add up two values using JavaScript [Archive]

xXThe JokerXx

08-25-2010, 01:35 AM

i am making a mock website where the user make their own computer by selecting items from drop down menus. then a value of the item comes up below. this works but i am having trouble adding the numbers up for the total cost. here is my code

<html><head><title>build</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">

</style></head>

<body>

<script type="text/javascript">

var motherboard = new Array(
'74',
'50',
'73',
'106',
'269',
'64',
'55',
'135',
'47',
'79',
'118',
'163');

var cpu = new Array(
'88',
'104',
'168',
'352');

function changeMotherboard(Mid) {
var ind = document.getElementById(Mid).selectedIndex;
document.getElementById("motherboardDisplay").innerHTML=motherboard[ind];
}

function changeCpu(Cid) {
var ind = document.getElementById(Cid).selectedIndex;
document.getElementById("cpuDisplay").innerHTML=cpu[ind];
}

</script>

</head><body>

<form>
Motherboard
<select id="motherboard" onChange="changeMotherboard('motherboard');">
<option value="0">Asus P5G41C-M-LX G41 DDR2+DDR3</option>
<option value="1">MSI G41M-P33 </option>
<option value="2">Asus P5P41T-LE </option>
<option>G-B H55M-S2H</option>
<option>Asus P7P55D-E-Deluxe</option>
<option>Asus M2N68-AM Plus </option>
<option>ASRock N68S3-UCC </option>
<option>Asus M4A88TD-M-EVO-USB3</option>
</select><br>
</form>
<div id="motherboardDisplay">Select from the list to see price</div>

<form>
CPU
<select name="cpu" id="cpu" onChange="changeCpu('cpu');">
<option value="0">E6500</option>
<option value="1">Core G6950</option>
<option value="2">i3-550</option>
<option>Core i7-930</option>
</select>
<br>
</form>
<div id="cpuDisplay" type = text>Select from the list to see price</div>
<p> </p>
<p>
</body>
</html>

jmrker

08-25-2010, 06:07 PM

Rather than have two separate arrays with the potential of miss-matched items, I would suggest these changes ...

<html>
<head>
<title>build</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

</style></head>
<body>

<script type="text/javascript">
// From: http://codingforums.com/showthread.php?t=203156

var motherboard = new Array( // Format is "Cost:Description",
":Select Motherboard",
"74:Asus P5G41C-M-LX G41 DDR2+DDR3",
"50:MSI G41M-P33",
"73:Asus P5P41T-LE",
"106:G-B H55M-S2H",
"269:Asus P7P55D-E-Deluxe",
"64:Asus M2N68-AM Plus",
"55:ASRock N68S3-UCC",
"135:Asus M4A88TD-M-EVO-USB3" // NOTE: no comma at end entry
);

var cpu = new Array( // Format is "Cost:Description",
":Select CPU",
"88:E6500",
"104:Core G6950",
"168:i3-550",
"352:Core i7-930" // NOTE: no comma after last entry
);

function $_(IDS) { return document.getElementById(IDS); }

function Populate(ArrName) {
var tmp = [];
var str = '';
for (var i=0; i<ArrName.length; i++) {
tmp = ArrName[i].split(':');
str += '<option value="'+ArrName[i]+'">'+tmp[1];
}
return str;
}

function Calc() {
var mbrd = 0;
var cpu = 0;
var total = 0;

var tmp = $_('motherboard').value.split(':');
mbrd = tmp[0]*1; if (tmp[0] == '') { mbrd = 0; }
$_('motherboardDisplay').innerHTML = 'Cost: $'+mbrd;

tmp = document.getElementById('cpu').value.split(':');
cpu = tmp[0]*1; if (tmp[0] == '') { cpu = 0; }
$_('cpuDisplay').innerHTML = 'Cost: $'+cpu;

total = mbrd + cpu;
$_('totalDisplay').innerHTML = 'Total: $'+total;
}

</script>
</head>
<body>

<form>
Motherboard
<select name="motherboard" id="motherboard" onChange="Calc()">
<script type="text/javascript">document.write(Populate(motherboard))</script>
</select>
<span id="motherboardDisplay"></span>
<p>

CPU
<select name="cpu" id="cpu" onChange="Calc()">
<script type="text/javascript">document.write(Populate(cpu))</script>
</select>
<span id="cpuDisplay"></span>
<p>

<div id="totalDisplay"></div>

</body>
</html>

BTW, you should enclose your scripts between [ code] and [ /code] tags (without the spaces) to make it easier to read on the forum.