JavaScript NaN 错误

【问题标题】：JavaScript NaN ErrorJavaScript NaN 错误
【发布时间】：2014-04-30 07:04:11
【问题描述】：

我正在制作包含运行总计的网站。我的意思是当用户在下拉菜单上选择项目时，运行成本将相应增加/减少。与this 类似（如果不相同）。 我遇到的问题是，当用户开始选择项目时，会出现“Build £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';
}

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

提前致谢。

如果这里有什么遗漏，请告诉我。

【问题讨论】：

标签： javascript html forms nan


【解决方案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

【讨论】：

    【解决方案2】：

    您的代码中有错字

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

    值后缺少一个=

    这对于列表中的每个第一项都是相同的错误。 我每次都用第二个选项尝试你的代码，并且它有效。

    【讨论】：

    • +1 每个select 中的第一个option 也是如此。所以value 正在返回选项的文本而不是值，并且在数组中找不到它。
    • 原来这是一个反复出现的错字，现在它正在工作。我的错。我是复制+粘贴代码以节省时间，并且考虑到它大多是相似的代码。
    • 每个人有时都需要第二双眼睛 ;-)
    【解决方案3】：

    这是因为 js 包装： 如果包装在 onload 函数中，则函数 calculateTotal() 是 provate，只能在 onLoad 回调中访问它。见http://jsfiddle.net/U2zSk。如果你直接包裹在头部，它的工作原理。见http://jsfiddle.net/U2zSk/2/

    【讨论】：

    • @mellamokb 是的，但重要的是要记住，因为 OP 没有说明它是如何包装的。它适用于错字。
    • 我不确定您所说的包装是什么意思？你的意思是表格包含在什么里面？在这种情况下，它就在 标签内。
    【解决方案4】：

    您的变量 buildPrice 是查询选择器的许多不同方法的结果。如果您没有在所有选择器中选择一个值，则计算选择器值的函数将不会返回一个数字，并且当最终总和时将产生 NaN。如果您将所有选择器作为默认的“无”选项放入，则不会给您带来问题。

    另外你有很多选项不正确：

    <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>

    【讨论】：

      猜你喜欢
      • 2016-06-27
      • 2013-06-15
      • 2017-01-01
      • 2014-03-25
      • 2011-07-03
      • 2017-10-10
      • 2012-10-04
      • 1970-01-01
      • 2013-08-12
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode