JavaScript NaN 错误

Question

我正在制作包含运行总计的网站。我的意思是，当用户在下拉菜单中选择项目时，运行成本将相应增加/减少。与 this 相似(如果不相同) . 我遇到的问题是，当用户开始选择项目时，会出现“构建的总价格 £NaN”。我是 Javascript 的新手，所以我真的不知道为什么会这样。

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>

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';
}

我很欣赏它有很多相似的代码，但我真的很想彻底理解为什么这不起作用。

提前致谢。

让我知道这是否有任何遗漏。

Answer 1

实际上看起来您很容易陷入复制/粘贴的困境。您的每个第二个列表项都缺少“=”。

原文:

<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