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

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

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

我想做一个三角形斜边计算器。先放一条腿，再放另一条腿，然后就得到斜边。但是，如果你先填第二个方框，它会说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>

您可以在第一次输入时设置默认值:

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

您可以使用isNaN()来检查您的值是否存在:

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

你可以这样做:

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" />
相关文章：