•  19-06-2023
  •  | 
  •  

Question

I'm making website that includes running total. By that I mean as the user selects items on a drop-down menu, a running cost will increase/decrease accordingly. Similar (if not the same) as this. The issue I'm having is that when the user starts selecting items, "Total Price For the Build £NaN" appears. I'm new to Javascript so I really have no idea why this is happening.

The HTML: 

<form action="" id="partsForm" onsubmit="return false;"> 
 <fieldset> 
   <legend>Choose your parts</legend>
      <label>CPU</label>
       <select id="cpu" name="cpu" onchange="calculateTotal()"> 
            <option value="None">None</option>
            <option value"A6">AMD A6 Dual Core (£56)</option>
            <option value="A8">AMD A8 Quad Core (£72)</option>
            <option value="760k">Athlon 760k Quad (£72)</option> 
            <option value="A10">AMD A10 Quad Core (£119)</option> 
            </select> 
            <br /> <br />

            <label>Motherboard</label>
            <select id="mobo" name="mobo" onchange="calculateTotal()">
            <option value="None">None</option> 
            <option value"DS2">Gigabyte A88X-DS2 (£45)</option>
            <option value="D3H">Gigabyte A88X D3H (£60)</option>
            <option value="A88X-M">ASUS A88X-M Plus (£67)</option> 
            <option value="A88X-UP4">Gigabyte A88X-UP4 (£109)</option> 
            </select> 
            <br /> <br />

            <label>Graphics Chip</label>
            <select id="gfx" name="gfx" onchange="calculateTotal()"> 
            <option value="None">None</option>
            <option value"260X">AMD R7 260X (£149)</option>
            <option value="650ti">GTX 650ti Boost (£169)</option>
            <option value="750ti">GTX 750ti (£179))</option> 
            <option value="R9_270">AMD R9 270 (£205)</option> 
            </select> 
            <br /> <br />

            <label>Power Supply</label>
            <select id="psu" name="psu" onchange="calculateTotal()"> 
            <option value="None">None</option>
            <option value"CX430">Corsair CX430 (£49)</option>
            <option value="CX500">Corsair CX500 (£59)</option>
            <option value="CX600">Corsair CX600 (£69)</option> 
            <option value="CX750">Corsair CX750 (£89)</option> 
            </select> 
            <br /> <br />

            <label>Case</label>
            <select id="case" name="case" onchange="calculateTotal()"> 
            <option value="None">None</option>
            <option value"Fractal">Fractal Core 1000 (£39)</option>
            <option value="NZXT">NZXT Source 210 Elite (£59)</option>
            <option value="200R">Corsair 200R (£69)</option> 
            <option value="300R">Corsair 300R (£89)</option> 
            </select> 
            <br /> <br />

            <label>Memory</label>
            <select id="ram" name="ram" onchange="calculateTotal()"> 
            <option value="None">None</option>
            <option value"4GB">4GB DDR3 (£39)</option>
            <option value="8GB">8GB DDR3 (£69) </option>
            <option value="16GB">16GB DDR3 (£109)</option> 
            </select> 
            <br /> <br />

            <label>Storage</label>
            <select id="storage" name="storage" onchange="calculateTotal()">
                <option value="None">None</option>      
                <option value="1TB">1TB HDD (£54)</option>
                <option value="120GB_SSD">120GB SSD (£69)</option>
                <option value="256GB_SSD">256GB SSD (£119)</option>
                <option value="1TB_SSD">1TB + 120GB SSD (£119)</option> 
             </select>   

    <div id="totalPrice" style="display:block;"> </div>


 </fieldset>

The JavaScript: 

//CPU Prices
var cpu_prices = new Array(); 
cpu_prices["None"]=0;
cpu_prices["A6"]=56;
cpu_prices["A8"]=72;
cpu_prices["760k"]=72;
cpu_prices["A10"]=119;

//MotherBoard Prices
var mobo_prices = new Array();
mobo_prices["None"]=0; 
mobo_prices["DS2"]=45;
mobo_prices["D3H"]=60;
mobo_prices["A88X-M"]=67;
mobo_prices["A88X-UP4"]=109;

//Graphics Chip Prices
var gfx_prices = new Array();
gfx_prices["None"]=0;
gfx_prices["260X"]=149;
gfx_prices["650ti"]=169;
gfx_prices["750ti"]=179;
gfx_prices["R9_270"]=205;

//Power Supply Prices
var psu_prices = new Array(); 
psu_prices["None"]=0;
psu_prices["CX430"]=49;
psu_prices["CX500"]=59;
psu_prices["CX600"]=69;
psu_prices["CX750"]=89;

//Case Prices
var case_prices = new Array(); 
case_prices["None"]=0;
case_prices["Fractal"]=39;
case_prices["NZXT"]=59;
case_prices["200R"]=69;
case_prices["300R"]=89;

// Memory Prices
var ram_prices = new Array();
ram_prices['None']=0;
ram_prices["4GB"]=39; 
ram_prices["8GB"]=69; 
ram_prices["16GB"]=109;

//Storage Prices    
var storage_prices = new Array(); 
storage_prices['None']=0;
storage_prices['1TB']=54; 
storage_prices['120GB_SSD']=69; 
storage_prices['256GB_SSD']=119;
storage_prices['1TB_SSD']=119;


//This will find the price of the CPU chosen by the user
function getCPUPrice() { 
var CpuPrice=0 
var theForm = document.forms["partsForm"]; 
var selectedCpu = theForm.elements['cpu'];  

//sets CpuPrice to whatever the user has chosen 
CpuPrice = cpu_prices[selectedCpu.value]; 

//return CpuPrice 
return CpuPrice; 
} 



//This will find the price of the Motherboard chosen by the user
function getMOBOPrice() { 
var MoboPrice=0 
var theForm = document.forms["partsForm"]; 
var selectedMobo = theForm.elements['mobo'];  

//sets MoboPrice to whatever the user has chosen 
MoboPrice = mobo_prices[selectedMobo.value]; 

//return MoboPrice 
return MoboPrice; 
} 





//This will find the price of the Graphics Chip chosen by the user
function getGFXPrice() { 
var GfxPrice=0 
var theForm = document.forms["partsForm"]; 
var selectedGfx = theForm.elements['gfx'];  

//sets GfxPrice to whatever the user has chosen 
GfxPrice = gfx_prices[selectedGfx.value]; 

//return GfxPrice 
return GfxPrice; 
} 



//This will find the price of the Power Supply chosen by the user
function getPSUPrice() { 
var PsuPrice=0
var theForm = document.forms["partsForm"]; 
var selectedPsu = theForm.elements['psu'];  

//sets PsuPrice to whatever the user has chosen 
PsuPrice = psu_prices[selectedPsu.value]; 

//return PsuPrice 
return PsuPrice; 
} 




//This will find the price of the Case chosen by the user
function getCasePrice() { 
var CasePrice = 0; 
var theForm = document.forms["partsForm"]; 
var selectedCase = theForm.elements['case'];  

//sets CasePrice to whatever the user has chosen 
CasePrice = case_prices[selectedCase.value]; 

//return CasePrice 
return CasePrice; 
} 





 //This will find the price of the Memory chosen by the user
 function getRamPrice() { 
var RamPrice=0 
var theForm = document.forms["partsForm"]; 
var selectedRam = theForm.elements['ram'];  

//sets RamPrice to whatever the user has chosen 
RamPrice = ram_prices[selectedRam.value]; 

//return RamPrice 
return RamPrice; 
} 




//This will find the price of the Storage device chosen by the user
function getStoragePrice() { 
var StoragePrice=0; 
var theForm = document.forms["partsForm"]; 
var selectedStorage = theForm.elements['storage'];  

//sets StoragePrice to whatever the user has chosen 
StoragePrice = storage_prices[selectedStorage.value]; 

//return StoragePrice 
return StoragePrice; 
 } 



//Get the Totals 
function calculateTotal() 
{   //gets prices from other functions 
var buildPrice = getCPUPrice() + getMOBOPrice() + 
getGFXPrice()+  getPSUPrice() + getCasePrice() + getRamPrice() + getStoragePrice(); 

//displays total cost 
var divobj = document.getElementById('totalPrice'); 
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Build £"+buildPrice; 
}

function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}

I appreciate that it's quite a lot of similar code, but I'd really like to thoroughly understand why this isn't working.

Thanks in advance.

Let me know if there's anything missing from this.

Was it helpful?

Solution

Actually looks like you fell prone to the copy/paste snafu. Each of your 2nd list items, was missing an "=".

Original: 

<select id="cpu" name="cpu" onchange="calculateTotal()">
    <option value="None">None</option>
    <option value"A6">AMD A6 Dual Core (£56)</option>
    <option value="A8">AMD A8 Quad Core (£72)</option>
    <option value="760k">Athlon 760k Quad (£72)</option>
    <option value="A10">AMD A10 Quad Core (£119)</option>
</select>

Fixed Fiddle

OTHER TIPS

You have a typo in your code

 <option value"CX430">Corsair CX430 (£49)</option>

There is a = missing after value

And this is the same error for each first item of your lists. I tried your code with the second choice each time, and it worked.

That's because of the js wrapping : If you wrap in an onload function, the function calculateTotal() is provate, it can't be accessed anywhere but in the onLoad callback. See http://jsfiddle.net/U2zSk. If you wrap directly in head, it's working. See http://jsfiddle.net/U2zSk/2/

your Variable buildPrice is the result of many different methods that query selectors. If you have not selected a value in all the selectors, the function that calculates the value of the selector will not return a number and when the final sum that will result NaN. If you put in all selector as the default 'None' option should not give you problems.

Additionally you have many options incorrect:

<option value"Fractal">Fractal Core 1000 (£39)</option>
<option value"CX430">Corsair CX430 (£49)</option>
<option value"260X">AMD R7 260X (£149)</option>
<option value"A6">AMD A6 Dual Core (£56)</option>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top