我如何摆脱JavaScript代码中文本框中的NaN？ [英] How do i get rid of the NaN in the text box in my JavaScript code?
问题描述
我正在尝试制作一个缺少三角腿的计算器。首先你把一条腿，斜边，然后你会得到失踪的腿。但是，如果你先填入第二个盒子，它会说NaN。我知道它并不重要，但有没有办法摆脱它，所以它说0，直到两个盒子被填满？这里是代码：
< html>
< head>
< script type =text / javascript>
函数missingleg（a，c）{
return Math.sqrt（c * c - a * a）;
}
< / script>
< / head>
< body>
< input type =buttonvalue =Missing Leg;/>
Leg：< input type =textid =legsize =2; />
Hypotenuse：< input type =textid =hyposize =2onChange =document.getElementById（'lostleg'）。value = missingleg（parseInt（document.getElementById（'leg'）） .value），parseInt（document.getElementById（'hypo'）。value））;/>
缺少腿：< input type =textplaceholder =0id =lostlegsize =2/>
< / body>
< / html>
同样的东西在这里...
< 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>
尝试修改 missingleg 函数为：
函数missingleg（a，c）{
if（isNaN a）|| isNaN（c））{
return 0;
}
return Math.sqrt（c * c - a * a）;
}
风格问题注释
为了纯粹的文体目的，我尽量在代码中加入尽可能少的代码。如果稍后有必要，将代码保留在标记之外将使调试变得更加容易。引入一个新函数， updateMissingLeg（），并将HTML调用为这样：
< input type =textid =hyposize =2onChange =updateMissingLeg（）/>
作为奖励，您可以移动 isNaN（）检入该函数以保持 missingleg（）更简单：
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;
}
另外一个好处是，你可以调用相同的 更新2
$ updateMissingLeg（）
< html> b $ b< p>根据要求，以下是整件事情：
< head>
< script type =text / javascript>
函数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 =textid =legsize =2
onChange =updateMissingLeg（）/>
Hypotenuse：< input type =textid =hyposize =2
onChange =updateMissingLeg（）/>
缺少腿：< input type =textplaceholder =0id =lostlegsize =2/>
< / body>
< / html>
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>
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.
这篇关于我如何摆脱JavaScript代码中文本框中的NaN？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
