Question

我开始通过HeadFirst JavaScript自学JavaScript，但遇到了一些麻烦。我正在做的这一章着重于处理将数据输入表单的过程。当我尝试使用updateOrder()函数时，parseInt()返回NaN，但是我输入的警报语句会打印正确的值。当我在HTML代码的值部分中用“ 0”替换“”时，便得到了正确的行为。这使我相信输入的内容前面会包含一个空字符。

更新：已经很晚了，我应该比现在输入代码更清楚。我相信我已经修复了所有的拼写错误，并且代码与我在沙箱运行中所得到的一样。我还想比@imEnCoded进行编辑。现在，错字已经解决，我发布的原始问题应该正确显示。

我的问题是：

我做错了吗（减去一些格式更改，我的代码完全和书中的一样）？
有什么办法可以解决这个问题？我在这里看过一篇文章建议使用正则表达式过滤掉之前的任何内容字符，但我有点希望清洁一些东西。

为简便起见，我仅在此处包括我确定为麻烦代码的内容，但我还将链接完整的解决方案代码。

Full HTML and JS for solution is here

JavaScript部分：

function updateOrder(){
    var TAXRATE=0.0925;
    var DONUTPRICE=0.50;
    var numCakeDonuts=parseInt(document.getElementById("cakedonuts")
                              .value);
    var numGlazedDonuts=parseInt(document.getElementById("glazeddonuts")
                              .value);

    if(isNaN(numCakeDonuts)||isNaN(numGlazedDonuts)){
       //alerts put by me to see what is actually held by variables
       //after parsing
       alert("Number of cake donuts is: "+numCakeDonuts);
       alert("Number of glazed donuts is: "+numGlazedDonuts);
       numCakeDonuts=0;
       numGlazedDonuts=0;
    }

        //...rest of code for function here
 }

，获取值的给定HTML是：

 <!--There's some non-troublesome HTML before this section-->
   <div>
     Number of cake donuts:<input type="text" id="cakedonuts" 
                            name="cakedonuts" value="" 
                            onchange="updateOrder();"/>
   </div>

  <div>
     Number of glazed donuts:<input type="text" id="glazeddonuts"
     name="glazeddonuts" value="" onchange="updateOrder();"/>
  </div>
<!--And some after-->

Answer 1

您错过了)和if(isNaN(numCakeDonuts)||isNaN(numGlazedDonuts))中"附近的Html

变量numCakedonuts的名称也错误，更正后的行将是：

alert("Number of cake donuts is: "+numCakeDonuts);

d将是D。

function updateOrder(){
    var TAXRATE=0.0925;
    var DONUTPRICE=0.50;
    var numCakeDonuts= parseInt(document.getElementById("cakedonuts")
                              .value);
    var numGlazedDonuts=parseInt(document.getElementById("glazeddonuts")
                              .value);

    if(isNaN(numCakeDonuts)||isNaN(numGlazedDonuts)){
       //alerts put by me to see what is actually held by variables
       //after parsing
       alert("Number of cake donuts is: "+ numCakeDonuts);
       alert("Number of glazed donuts is: "+numGlazedDonuts);
       numCakeDonuts=0;
       numGlazedDonuts=0;
    }

        //...rest of code for function here
 }

<!--There's some non-troublesome HTML before this section-->
   <div>
     Number of cake donuts:<input type="text" id="cakedonuts" 
                            name="cakedonuts" value="" 
                            onchange="updateOrder();"/>
   </div>

  <div>
     Number of glazed donuts:<input type="text" id="glazeddonuts"
     name="glazeddonuts" value="" onchange="updateOrder();"/>
  </div>
<!--And some after-->

Answer 2

这里的问题是，在第一个输入上触发onChange事件时，其他输入保持为空。和

parseInt('') // NaN

您可以做的是将输入值强制转换为数字，然后再将其发送到parseInt函数。

var numCakeDonuts=parseInt(+document.getElementById("cakedonuts")
                          .value);
var numGlazedDonuts=parseInt(+document.getElementById("glazeddonuts")
                          .value);

上面的+符号会将其操作的值强制转换为数字。之所以起作用，是因为+运算符会将空字符串强制转换为0。因此，在进入0函数之前，空字符串输入将转换为parseInt

+"" // 0
parseInt(+"") // 0

如果值中包含任何字符串字符，一个陷阱将是+运算符将强制为NaN。

 +'34abc' // NaN

出于安全目的，如果+运算符将它们中的任何一个强制为NaN，则可以为每个参数传递一个可选值

var numCakeDonuts=parseInt(+document.getElementById("cakedonuts")
                          .value) || 0;
var numGlazedDonuts=parseInt(+document.getElementById("glazeddonuts")
                          .value) || 0;

无法解释的parseInt（）行为

2 个答案: