Question

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

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

Answer 1

您会收到错误Uncaught ReferenceError: a is not defined。

当页面上加载的脚本文件和a不在全局范围内时，执行下面的块。它在function compute

中声明

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

对于您的测试，如果在function compute行之后的var a = form1.inputA.value;内阻止，您可以向上移动并可以使用它。

如果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);

}

Answer 2

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

isNaN JavaScript函数

2 个答案: