我在理解为什么我一直将 NaN 作为返回输出时遇到问题
[英]I'm having problems understanding why I keep getting NaN as a return output
问题描述
const myFunction = function() { let fah; fah = document.getElementById('fah').value; let celcius; celcius = ((fah - 32) * 5/9); document.getElementById('cel').value = celcius; };
<body> <main> <h1 class="header">Fahrenhiet to celcius</h1> <div class="wrapper"> <form class="form"> <div class="fah"> <label for="fah" class="fahrenhiet" id="fah">°F</label> <input type="text" id="fah" class="input-fah" value=""> </div> <div class="span"> <span class="equals"> = </span> </div> <div class="cel"> <input type="text" id="cel" class="input-cel" value=""> <label for="cel" class="celcius">°C</label> </div> <div class="bttn-group"> <button class="bttn bttn-sumbit" type="" onclick="myFunction(); event.preventDefault();">Submit</button> <input class="bttn bttn-reset" type="reset" value="Reset"> </div> </form> </div> </main> <script src="script.js"></script> </body>
I came back to this code after a week and it was working perfect before.
一周后我又回到了这段代码，之前它运行得很好。 Now all of a sudden every time I run it I keep getting NaN as my output.现在，每次运行它时，我都会突然将 NaN 作为输出。 I've tried everything I can think of even using parseInt(), but after toying around I realize that my fah variable is not being treated as a number as far as I can tell.我已经尝试了所有我能想到的甚至使用 parseInt() 的方法，但是在玩弄之后我意识到我的 fah 变量并没有被视为一个数字。 I tried deleting the document.getElementById('fah').value;我尝试删除 document.getElementById('fah').value; and used a random number and it seemed to work.并使用了一个随机数，它似乎有效。 I'm at a loss.我不知所措。 I'm still learning javascript so I'm sure it's something I haven't learned yet.我还在学习 javascript，所以我确定这是我还没有学到的东西。
1 个解决方案
解决方案1
3 2021-07-19 21:58:25
You had a duplicate ID in your HTML which is not valid and caused your code to pick up the value of the label instead of the input field.您的 HTML 中有重复的 ID，该 ID 无效并导致您的代码选择标签的value而不是输入字段的值。
You should also parseInt the user input to make sure it's a number.您还应该parseInt用户输入以确保它是一个数字。
const myFunction = function() { let fah; fah = parseInt(document.getElementById('fah').value); // CHANGE ---^ let celcius; celcius = ((fah - 32) * 5/9); document.getElementById('cel').value = celcius; };
<body> <main> <h1 class="header">Fahrenhiet to celcius</h1> <div class="wrapper"> <form class="form"> <div class="fah"> <label for="fah" class="fahrenhiet" id="fah-label">°F</label> <!-- CHANGE ---------------------------------------^ --> <input type="text" id="fah" class="input-fah" value=""> </div> <div class="span"> <span class="equals"> = </span> </div> <div class="cel"> <input type="text" id="cel" class="input-cel" value=""> <label for="cel" class="celcius">°C</label> </div> <div class="bttn-group"> <button class="bttn bttn-sumbit" type="" onclick="myFunction(); event.preventDefault();">Submit</button> <input class="bttn bttn-reset" type="reset" value="Reset"> </div> </form> </div> </main> <script src="script.js"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.