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

Question

我正在嘗試制作一個三角形的斜邊計算器。 首先，您放一條腿，然后放另一條腿，然后得到斜邊。 但是，如果您首先填寫第二個框，它將顯示NaN。 我知道它不是那么重要，但是有沒有一種方法可以消除它，因此在兩個框都填滿之前它會顯示“ 0”？ 這是代碼：

<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

您可以在第一個輸入上設置默認值：

<input type="text" id="leg1" size="2" value="0" />

或者，您可以將功能綁定到單擊按鈕上，然后在嘗試計算之前進行一些驗證（ fiddle ）：

var leg1 = document.getElementById('leg1');
var leg2 = document.getElementById('leg2');

function hypotenuse(a,b){
     return Math.sqrt(a*a + b*b);
}

document.getElementById('submit').addEventListener('click', function() {
    // Check both fields are populated. This validation could 
    // be more sophisticated if you needed it to be.
    if (leg1.value !== '' && leg2.value !== '') {
         document.getElementById('result').value = hypotenuse(parseInt(leg1.value),parseInt(leg2.value));    
    } else {
         // You could display an error message here
         console.log('Please fill out both fields');   
    }
});

Answer 2

您可以使用isNaN()來檢查您的值是否存在：

<script type="text/javascript">
    function hypotenuse(a,b){
        if (isNaN(a) || isNaN(b)) {
            return 0;
        }

        return Math.sqrt(a*a + b*b);
    }
</script>

Answer 3

您可以執行以下操作：

使用Javascript：

function hypotenuse(){
    var angleA = document.getElementById['leg1'].val;
    var angleB = document.getElementById['leg2'].val;
    if(angleA != '' && angleB != ''){
        var angleC = Math.sqrt(a*a + b*b);
        document.getElementById['result'].val = angleC;
    }
}

您的HTML看起來像

A:<input type="text" id="leg1" size="2" onblur="hypotenuse()" />
B:<input type="text" id="leg2" size="2" onblur="hypotenuse()" />
Hypotenuse:<input type="text" placeholder="0" id="result" size="2" />

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

問題描述

3 個解決方案

解決方案1
1 2014-03-12 00:10:23

解決方案2
0 2014-03-12 00:13:01

解決方案3
0 2014-03-12 00:15:12

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

問題描述

3 個解決方案

解決方案1 1 2014-03-12 00:10:23

解決方案2 0 2014-03-12 00:13:01

解決方案3 0 2014-03-12 00:15:12

解決方案1
1 2014-03-12 00:10:23

解決方案2
0 2014-03-12 00:13:01

解決方案3
0 2014-03-12 00:15:12