Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Thanked 0 Times in 0 Posts

    How to add up two values using JavaScript

    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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Thanked 508 Times in 502 Posts

    Lightbulb Some suggestions ...

    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.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts