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

后端未结

关注

 2  1262

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 wil

相关标签:

2条回答

误落风尘

2021-01-21 01:03

Try modifying your missingleg function to this:

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:

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

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.

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

0 讨论(0)

闹比i

2021-01-21 01:03

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

0 讨论(0)