我如何摆脱在我的JavaScript代码文本框中的NaN

How do i get rid of the NaN in the text box in my JavaScript code?

本文关键字：文本 NaN 代码 JavaScript 何摆脱 我的      更新时间：2023-09-26

我正在尝试制作一个三角形缺腿计算器。先画一条腿，斜边，然后再画缺的那条腿。但是，如果你先填第二个方框，它会说NaN。我知道这不是那么重要，但是有没有办法消除它，让它显示"0"，直到两个盒子都被填满?下面是代码:

<html>
<head>
<script type="text/javascript">
function missingleg(a,c){
return Math.sqrt(c*c - a*a);
}
</script>
</head>
<body>
<input type="button" value="Missing Leg";" />
Leg:<input type="text" id="leg" size="2";" />
Hypotenuse:<input type="text" id="hypo" size="2"onChange="document.getElementById('lostleg').value=missingleg(parseInt(document.getElementById('leg').value),parseInt(document.getElementById('hypo').value)); " />
Missing Leg:<input type="text" placeholder="0" id="lostleg" size="2" />
</body>
</html>


<html>
<head>
<script type="text/javascript">
function hypotenuse(a,b){
return Math.sqrt(a*a + b*b);
}
</script>
</head>
<body>
<input type="button" value="Hypoteneuse";" />
A:<input type="text" id="leg1" size="2";" />
B:<input type="text" id="leg2" size="2" onChange="document.getElementById('result').value=hypotenuse(parseInt(document.getElementById('leg1').value),parseInt(document.getElementById('leg2').value));" />
Hypotenuse:<input type="text" placeholder="0" id="result" size="2" />
</body>
</html>

试着这样修改你的missingleg函数:

function missingleg(a,c) {
    if ( isNaN(a) || isNaN(c) ) {
        return 0;
    }
    return Math.sqrt(c*c - a*a);
}

关于风格问题的说明

纯粹出于风格的考虑，我尽量在标记中放入尽可能少的代码。将代码保留在标记之外将使以后必要时更容易进行调试。引入一个新函数updateMissingLeg()，并让HTML像这样调用它:

<input type="text" id="hypo" size="2" onChange="updateMissingLeg()" />

作为奖励，您可以将isNaN()检查移到该函数中，以保持missingleg()更简单:

function missingleg(a,c){
    return Math.sqrt(c*c - a*a);
}
function updateMissingLeg() {
    var a = parseInt(document.getElementById('leg').value);
    var c = parseInt(document.getElementById('hypo').value);
    if ( isNaN(a) || isNaN(c) ) {
        document.getElementById('lostleg').value = '';
        return;
    }
    var lostleg = missingleg(a, c);
    document.getElementById('lostleg').value = lostleg;
}

作为进一步的奖励，您可以从两个文本框控件调用相同的updateMissingLeg()函数。

更新2

按要求，以下是全部内容:

<html>
    <head>
        <script type="text/javascript">
            function missingleg(a,c){
                return Math.sqrt(c*c - a*a);
            }
            function updateMissingLeg() {
                var a = parseInt(document.getElementById('leg').value);
                var c = parseInt(document.getElementById('hypo').value);
                if ( isNaN(a) || isNaN(c) ) {
                    document.getElementById('lostleg').value = '';
                    return;
                }
                var lostleg = missingleg(a, c);
                document.getElementById('lostleg').value = lostleg;
            }
        </script>
    </head>
    <body>
        Leg: <input type="text" id="leg" size="2" 
                    onChange="updateMissingLeg()" />
        Hypotenuse: <input type="text" id="hypo" size="2"
                    onChange="updateMissingLeg()" />
        Missing Leg: <input type="text" placeholder="0" id="lostleg" size="2" />
    </body>
</html>

和一个jsfiddle来玩它可以在这里找到

对于一个快速而肮脏的解决方案，使用三元运算符:

function missingleg(a,c){
    return (isNaN(a) || isNaN(c)) ? 0 : Math.sqrt(c*c - a*a);
}

您还可以使其不那么突兀，并在函数中进行解析:

function missingleg() {
    var a = parseInt(document.getElementById('leg').value, 10),
        c = parseInt(document.getElementById('hypo').value, 10);
    document.getElementById('lostleg').value = (isNaN(a) || isNaN(c)) ? 0 : Math.sqrt(c*c - a*a);
}
相关文章：