晚餐成本计算器麻烦转换字符串为整数

Question

我使用parseInt将.values从字符串转换为数字。但是，如果用户输入十进制值，则输出为NaN。这是我的代码：

Dinner Cost:<input type="text" id="cost" /><br /><br /> 
Tax Rate:<input type="text" id="taxRate" /><br /><br /> 

<button id="btn">Determine Total Costs</button><br /><br /> 

<p id="para"></p> 

document.getElementById("btn").addEventListener('click', totalCosts); 

function totalCosts() { 

    var dinnerCosts = document.getElementById("cost").value; 
    var taxRate = document.getElementById("taxRate").value; 
    taxRate = parseInt(taxRate); 
    dinnerCosts = parseInt(dinnerCosts); 


    var taxCost = dinnerCosts * taxRate; 
    var totalCost = dinnerCosts + taxCost; 

    return document.getElementById("para").innerHTML = "Your dinner cost " + dinnerCosts + ", your tax costs " + taxCost + ", for a total cost of " + totalCost; 
} 

我在做什么错？有没有更合理的方式将这些默认字符串转换为数字而不是parseInt？

谢谢！

Answer 1

使用parseFloat（）而不是parseInt函数（）使用方法：taxRate = parseFloat(taxRate);

作为一个良好的编程习惯，你应该避免在这种conversions.One简单的方法例外在这种Javascript情况下做强健的类型检查是为了避免：

• un在JavaScript对象中声明的变量
• 未申报的属性（也就是字典）
• Lnull值
• NaN值

下面是一个简单而快速的概述：

// 
var vfftest  = 0.05;      // float 
var viitest  = 3000;      // integer 
var vssblank  = '';       // empty string 
var vssnonblank = 'hello';     // non-empty string 
var vddempty  = {};       // dictionary with no name-value pairs 
var vddnonempty = {'alpha':1,'bravo':'two'}; // dictionary with name- value pairs 
var vnull   = null;      // null 

// check parseFloat 
console.log(parseFloat(vssnonblank)); // NaN 
console.log(parseFloat(vssblank)); // NaN 
console.log(parseFloat(vfftest));  // 0.05 
console.log(parseFloat(viitest));  // 3000 
console.log(parseFloat(vnull));  // NaN 
console.log(parseFloat(vddempty)); // NaN 
console.log(parseFloat(vddnonempty)); // NaN 
console.log(parseFloat(vnoExisto)); // EXCEPTION 

除此之外请参考this链接，并了解如何避免此类转换中的例外情况。

Answer 2

您可以直接使用Number构造没有实例它返回文字数量。另外，您可以使用parseFloat

document.getElementById("btn").addEventListener('click', totalCosts); 
 

 
function totalCosts() { 
 

 
    var dinnerCosts = document.getElementById("cost").value; 
 
    var taxRate = document.getElementById("taxRate").value; 
 
    taxRate = Number(taxRate); 
 
    dinnerCosts = Number(dinnerCosts); 
 

 

 
    var taxCost = dinnerCosts * taxRate; 
 
    var totalCost = dinnerCosts + taxCost; 
 

 
    return document.getElementById("para").innerHTML = "Your dinner cost " + dinnerCosts + ", your tax costs " + taxCost + ", for a total cost of " + totalCost; 
 
}

Dinner Cost:<input type="text" id="cost" /><br /><br /> 
 
Tax Rate:<input type="text" id="taxRate" /><br /><br /> 
 

 
<button id="btn">Determine Total Costs</button><br /><br /> 
 

 
<p id="para"></p>