isNaN JavaScript Function

本文关键字：Function JavaScript isNaN 更新时间：2023-09-26

我第一次学习如何使用isNaN，并希望得到一些帮助来发现我的错误。我用一个警告框为可变a设置了isNaN，但是当我输入单词或不输入数字时，警报不会出现。

<!DOCTYPE html>
<html>
    <head>
        <title>Project</title>
        <style type=text/css>
            .inbox {
                width=30px;
                text-align: right;
                border: 2px solid black;
            }
            .align {
                text-align: right
            }
        </style>
        <script type="text/javascript">
            function compute() {
                var a = form1.inputA.value;
                a = parseFloat(a);
                var b = form1.inputB.value;
                b = parseFloat(b);
                var c = form1.inputC.value;
                c = parseFloat(c);
                var d = a + b + c;
                form1.quantity.value = d.toFixed(2);
                var e = a * 5.49;
                form1.sumA.value = e.toFixed(2);
                var f = b * 7.49;
                form1.sumB.value = f.toFixed(2);
                var g = c * 6.49;
                form1.sumC.value = g.toFixed(2);
                var h = e + f + g;
                form1.total.value = h.toFixed(2);
                var i = h * .06;
                form1.tax.value = i.toFixed(2);
                var j = i + h;
                form1.sub.value = j.toFixed(2);
            }
            if (isNaN(a)) {
                alert('s');
            }
            function pageInit() {
                form1.inputA.focus();
            }
        </script>
    </head>
    <body onload="pageInit();">
        <form id="form1">
            <table border="2">
                <tr>
                    <th colspan="4">Sample Order Form</th>
                </tr>
                <tr>
                    <th>Quantity</th>
                    <th>item</th>
                    <th>Unit Price</th>
                    <th>Totals</th>
                </tr>
                <tr>
                    <th>
                        <input tabindex="1" class="inbox" type="text" id="inputA" />
                    </th>
                    <th>Apples</th>
                    <td>$5.49</td>
                    <th>
                        <input class="inbox" type="text" id="sumA" readonly="readonly" />
                    </th>
                </tr>
                <tr>
                    <th>
                        <input tabindex="2" class="inbox" type="text" id="inputB" />
                    </th>
                    <th>Pears</th>
                    <td>$7.49</td>
                    <th>
                        <input class="inbox" type="text" id="sumB" readonly="readonly" />
                    </th>
                </tr>
                <tr>
                    <th>
                        <input tabindex="3" class="inbox" type="text" id="inputC" />
                    </th>
                    <th>Grapes</th>
                    <td>$6.49</td>
                    <th>
                        <input class="inbox" type="text" id="sumC" readonly="readonly" />
                    </th>
                </tr>
                <tr>
                    <th>
                        <input class="inbox" type="text" id="quantity" readonly="readonly" />
                    </th>
                    <th class="align" colspan="2">Subtotal</th>
                    <th>
                        <input class="inbox" type="text" id="total" readonly="readonly" />
                    </th>
                </tr>
                <tr>
                    <th class="align" colspan="3">Tax@6%</th>
                    <th>
                        <input class="inbox" type="text" id="tax" readonly="readonly" />
                </tr>
                <tr>
                    <th>
                        <input tabindex="4" type="button" value="Compute" onclick="compute();" />
                    </th>
                    <th class="align" colspan="2">Total</th>
                    <th>
                        <input class="inbox" type="text" id="sub" readonly="readonly" />
                    </th>
                </tr>
            </table>
        </form>
    </body>
</html>

你会得到错误Uncaught ReferenceError: a is not defined。

当脚本文件加载到页面上并且a不在全局范围内时，将执行以下块。它在function compute内声明

        if (isNaN(a)) {
            alert('s');
        }

对于您的测试，您可以在线路var a = form1.inputA.value;后移动到 if 块内部function compute上方，并可以使用它。

如果a不是数字，则当您点击"计算"按钮时将显示alert('s')。

以下是基于跨浏览器的标准推荐方法：

//Add below function which can be useful to get DOM element based on element id.
function $(id) {
  return document.getElementById(id)
}
function compute() {
  var a = $("inputA").value,
    b = $("inputB").value,
    c = $("inputC").value;
  //below is your test alert checking
  if (isNaN(a)) {
    alert('s');
  }
  a = parseFloat(a, 10);
  b = parseFloat(b, 10);
  c = parseFloat(c, 10);
  var d = a + b + c,
    e = a * 5.49,
    f = b * 7.49,
    g = c * 6.49,
    h = e + f + g,
    i = h * .06,
    j = i + h;
  $("quantity").value = d.toFixed(2);
  $("sumA").value = e.toFixed(2);
  $("sumB").value = f.toFixed(2);
  $("sumC").value = g.toFixed(2);
  $("total").value = h.toFixed(2);
  $("tax").value = i.toFixed(2);
  $("sub").value = j.toFixed(2);
}

if (isNaN(a)) {
        alert('Please set a number');
}