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

Question

I'm trying to make a triangle missing leg calculator. 我正试图制作一个缺少腿部计算器的三角形。 First you put one leg, the hypotenuse, then you will get the missing leg. 首先你放一条腿，斜边，然后你会得到缺失的腿。 But, if you fill in the second box first, It will say NaN. 但是，如果你先填写第二个框，它会说NaN。 I know its not that important, but is there a way to get rid of it so it says "0" until both boxes are filled? 我知道它并不重要，但有没有办法摆脱它，所以它说“0”，直到两个盒子都填满？ And here is the code: 以下是代码：

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

Same thing here... 这里也一样......

<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

Try modifying your missingleg function to this: 尝试将missingleg函数修改为：

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

A NOTE ON STYLE ISSUES 关于风格问题的说明

For purely stylistic purposes, I'd try to put as little code in the markup as possible. 出于纯粹的风格目的，我会尽量在标记中加入尽可能少的代码。 Keeping code out of the markup will make it easier to debug should it become necessary later. 将代码保留在标记之外将使以后更容易调试。 Introduce a new function, updateMissingLeg() , and put have your HTML call it like this: 引入一个新函数updateMissingLeg() ，并将你的HTML调用如下：

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

As a bonus, you could move your isNaN() checks into that function to keep the missingleg() simpler: 作为奖励，您可以将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;
}

As a further bonus, you can call the same updateMissingLeg() function from both text box controls. 作为进一步的奖励，您可以从两个文本框控件中调用相同的updateMissingLeg()函数。

UPDATE 2 更新2

As requested, here's the whole thing: 根据要求，这是完整的事情：

<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. 在这里可以找到一个可以玩它的jsfiddle。

Answer 2

For a quick and dirty solution, use the ternary operator: 对于快速而肮脏的解决方案，请使用三元运算符：

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

You could also make it less obtrusive and do the parsing in the function: 你也可以使它不那么突兀，并在函数中进行解析：

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 个解决方案

解决方案1
1 2014-03-11 19:11:01

解决方案2
0 2014-03-11 19:12:33

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

问题描述

2 个解决方案

解决方案1 1 2014-03-11 19:11:01

解决方案2 0 2014-03-11 19:12:33

解决方案1
1 2014-03-11 19:11:01

解决方案2
0 2014-03-11 19:12:33