为什么这些函数会出现 NaN 错误

Question

I just started learn Javascript about 2 months ago.我大约 2 个月前才开始学习 Javascript。 I came up with this project idea after doing a couple tutorials but now I'm stuck.我在做了几个教程后想出了这个项目的想法，但现在我被卡住了。 I keep on getting an error The specified value "NaN" is not a valid number.我不断收到错误指定的值“NaN”不是有效数字。 The value must match to the following regular expression: -?(\\d+|\\d+.\\d+|.\\d+)([eE][-+]?\\d+)?该值必须与以下正则表达式匹配：-?(\\d+|\\d+.\\d+|.\\d+)([eE][-+]?\\d+)? for these 3 lines.对于这 3 行。

document.querySelector('.bf').value = Math.round(bodyfat);
document.querySelector('.fat').value = Math.round(fat);
document.querySelector('.lm').value = Math.round(leanMass);

Any assistance is greatly appreciated.非常感谢任何帮助。

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title></title>
  </head>

  <body>
    <h1>Bodyfat Caculator</h1>
    <input type="radio" id="male" name="gender" class="genderM">
    <label>Male</label>
    <input type="radio" id="female" name="gender" class="genderF">
    <label>Female</label>

    <div id="male" class="male">
      <div>
            <label>Weight(lbs)</label><input type="number" name="weight" class="weight"><br>
            <label>Height(inches)</label><input type="number" name="height" class="height"><br>
            <label>Neck(inches)</label><input type="number" name="neck" class="neck"><br>
            <label>Waist(inches)</label><input type="number" name="waist" class="waist">
      </div>


        <div id="female" class="female">
      <div>
            <label>Weight(lbs)</label><input type="number" name="weightF" class= "weightF"><br>
            <label>Height(inches)</label><input type="number" name="heightF" class="heightF"><br>
            <label>Neck(inches)</label><input type="number" name="neckF" class="neckF"><br>
            <label>Waist(inches)</label><input type="number" name="waistF" class="waistF"><br>
            <label>Hips(inches)</label><input type="number" name="hipsF" class="hipsF">
      </div>  

      <div>
        <button type="button" id="calculate" class="calculate">Calculate</button> 
      </div>
      <div>
        <label>Bodyfat(%)</label><input type="number" name="bf" class="bf" readonly="readonly"><br>
        <label>Lean Mass(lbs)</label><input type="number" name="lm" class = "lm" readonly="readonly"><br>
        <label>Fat(lbs)</label ><input type="number" name="fat" class="fat" readonly="readonly"><br>
      </div>              
    </div>
    <script src="body.js"></script>
  </body>
</html>

    ````` This is in a separate file````

      function result(){    

      var bodyfat, weight, height, waist, hips, neck;




    document.querySelector('.genderM').addEventListener("click", male);

        function male() {

         weight = parseFloat(document.querySelector('.weight').value);
         height = parseFloat(document.querySelector('.height').value);
         neck = parseFloat(document.querySelector('.neck').value);
         waist = parseFloat(document.querySelector('.waist').value);

        bodyfat = 495 / (1.0324 - 0.19077 * Math.log10((waist * 2.54) - (neck * 2.54)) + 0.15456 * Math.log10(height * 2.54)) - 450;


        };



    document.querySelector('.genderF').addEventListener('click',female);

        function female(){
            weight = parseFloat(document.querySelector('.weightF').value);
            height = parseFloat(document.querySelector('.heightF').value);
            neck = parseFloat(document.querySelector('.neckF').value);
            waist = parseFloat(document.querySelector('.waistF').value);                
            hips = parseFloat(document.querySelector('.hipsF').value);
            bodyfat = 495 / (1.0324 - 0.19077 * Math.log10((waist * 2.54) - (neck * 2.54)) + 0.15456 * Math.log10(height * 2.54)) - 450;



        };

    document.querySelector('.calculate').addEventListener('click', result);



            document.querySelector('.bf').value = Math.round(bodyfat);
            fat = weight * (bodyfat / 100);
            document.querySelector('.fat').value = Math.round(fat);
            leanMass = weight - fat; 
            document.querySelector('.lm').value = Math.round(leanMass);

        };


        result();

Answer 1

The problem is when you call result at the end your variables don't have a value yet like in this line document.querySelector('.bf').value = Math.round(bodyfat);问题是当你在最后调用 result 时，你的变量还没有像这一行那样的值document.querySelector('.bf').value = Math.round(bodyfat); so bodyfat is undefined and that causes Math.round(bodyfat) to throw a NaN.所以 bodyfat 是未定义的，这会导致 Math.round(bodyfat) 抛出一个 NaN。

You should check Chrome DevTools to be able to debug and find this errors.您应该检查 Chrome DevTools 以便能够调试并找到此错误。

为什么这些函数会出现 NaN 错误

问题描述

1 个解决方案

解决方案1
0 2020-04-01 00:28:44

为什么这些函数会出现 NaN 错误

问题描述

1 个解决方案

解决方案1 0 2020-04-01 00:28:44

解决方案1
0 2020-04-01 00:28:44