How do i get rid of the NaN in the text box in my JavaScript code?
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. 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? 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>
2 answers
solution1
1 2014-03-11 19:11:01
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>
solution2
0 2014-03-11 19:12:33
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.