如何擺脫JavaScript代碼中文本框中的NaN？

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>

在這里可以找到一個可以玩它的jsfiddle。

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 個解決方案

解決方案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