我如何摆脱JavaScript和HTML代码中文本框中的NaN？ [英] How do i get rid of the NaN in the text box in my JavaScript and HTML code?
本文介绍了我如何摆脱JavaScript和HTML代码中文本框中的NaN？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< html>
< head>
< script type =text / javascript>
函数hypotenuse（a，b）{
return Math.sqrt（a * a + b * b）;
}
< / script>
< / head>
< body>
< input type =buttonvalue =Hypoteneuse;/>
A：< input type =textid =leg1size =2; />
B：< input type =textid =leg2size =2onChange =document.getElementById（'result'）。value = hypotenuse（parseInt（document.getElementById（'leg1'）） .value的），parseInt函数（的document.getElementById（ 'LEG2'）值））;。 />
Hypotenuse：< input type =textplaceholder =0id =resultsize =2/>
< / body>
< / html>
解决方案
您可以在第一个输入上设置默认值：
< input type =textid =leg1size =2value =0/>
或者你可以将你的函数绑定到一个按钮上并在你尝试计算之前进行一些验证（小提琴）：
var leg1 = document.getElementById（'leg1'）;
var leg2 = document.getElementById（'leg2'）;
函数hypotenuse（a，b）{
return Math.sqrt（a * a + b * b）;
$ b document.getElementById（'submit'）。addEventListener（'click'，function（）{
//检查两个字段是否填充。如果你需要它，可以更加复杂。
if（leg1.value！==''&& leg2.value！==''）{
document.getElementById（'结果'）。value = hypotenuse（parseInt（leg1.value），parseInt（leg2.value））;
} else {
//你可以在这里显示一条错误信息
console.log （'请填写两个字段'）;
}
}）;
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>
解决方案
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');
}
});
这篇关于我如何摆脱JavaScript和HTML代码中文本框中的NaN？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
