How do i get rid of the NaN in the text box in my JavaScript and HTML code?
Question
I'm trying to make a triangle Hypotenuse calculator. First you put one leg, then the other leg, then you will get the Hypotenuse. 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 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>
3 answers
solution1
1 2014-03-12 00:10:23
You could set a default value on the first input:
<input type="text" id="leg1" size="2" value="0" />
Or you could bind your function to the click of a button and do some validation before you attempt the calculation ( 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');
}
});
solution2
0 2014-03-12 00:13:01
You can use isNaN() to check whether your values exist or not:
<script type="text/javascript">
function hypotenuse(a,b){
if (isNaN(a) || isNaN(b)) {
return 0;
}
return Math.sqrt(a*a + b*b);
}
</script>
solution3
0 2014-03-12 00:15:12
You could do something like this:
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;
}
}
Your HTML would look like
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" />
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.