Question

我正在尝试制作一个缺少腿部计算器的三角形。首先你放一条腿，斜边，然后你会得到缺失的腿。但是，如果你先填写第二个框，它会说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>

Answer 1

尝试将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>

And a jsfiddle to play with it can be found here.

Answer 2

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

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);
}

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

2 个答案: