View Full Version : How to add up two values using JavaScript

xXThe JokerXx
08-25-2010, 02: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


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



<script type="text/javascript">

var motherboard = new Array(

var cpu = new Array(

function changeMotherboard(Mid) {
var ind = document.getElementById(Mid).selectedIndex;

function changeCpu(Cid) {
var ind = document.getElementById(Cid).selectedIndex;



<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>
<div id="motherboardDisplay">Select from the list to see price</div>

<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>
<div id="cpuDisplay" type = text>Select from the list to see price</div>

08-25-2010, 07:07 PM
Rather than have two separate arrays with the potential of miss-matched items, I would suggest these changes ...

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


<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",
"104:Core G6950",
"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;


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

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

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


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