Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    1
    Thanks
    0
    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

    <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>&nbsp;</p>
    <p>
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Some suggestions ...

    Rather than have two separate arrays with the potential of miss-matched items, I would suggest these changes ...
    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">
    // 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.


  •  

    Posting Permissions

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