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

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

javascript html

Javascript 为什么这些函数会出现NaN错误,javascript,html,Javascript,Html,我大约两个月前才开始学习Javascript。我在做了几次教程后提出了这个项目的想法，但现在我被卡住了。我不断收到一个错误，指定的值“NaN”不是有效的数字。该值必须与以下正则表达式匹配：-？（\d++\d+。\d++.\d+）（[eE][-+]？\d+）？对于这3行 document.querySelector('.bf').value = Math.round(bodyfat); document.querySelector('.fat').value = Math.round(fat);

我大约两个月前才开始学习Javascript。我在做了几次教程后提出了这个项目的想法，但现在我被卡住了。我不断收到一个错误，指定的值“NaN”不是有效的数字。该值必须与以下正则表达式匹配：-？（\d++\d+。\d++.\d+）（[eE][-+]？\d+）？对于这3行

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

非常感谢您的帮助

<!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();


体脂计算器
男性
女性
重量（磅）

高度（英寸）

颈部（英寸）

腰围（英寸）
重量（磅）

高度（英寸）

颈部（英寸）

腰围（英寸）

臀部（英寸）
算计
体脂（%）

倾斜质量（lbs）

脂肪（磅）

`````这是一个单独的文件````
函数结果（）{
var体脂、体重、身高、腰围、臀围、颈部；
document.querySelector（'.genderM'）。addEventListener（“单击”，男性）；
功能男性（）{
weight=parseFloat（document.querySelector（'.weight'）.value）；
height=parseFloat（document.querySelector（'.height'）.value）；
neck=parseFloat（document.querySelector（'.neck'）.value）；
腰围=parseFloat（document.querySelector（'.height'）.value）；
体脂=495/（1.0324-0.19077*数学对数10（（腰部*2.54）-（颈部*2.54））+0.15456*数学对数10（身高*2.54））-450；
};
document.querySelector（'.genderF'）。addEventListener（'click'，女性）；
功能女性（）{
weight=parseFloat（document.querySelector（'.weightF'）.value）；
height=parseFloat（document.querySelector（'.heightF'）.value）；
neck=parseFloat（document.querySelector（'.neckF'）.value）；
腰围=parseFloat（document.querySelector（'.weightf'）.value）；
hips=parseFloat（document.querySelector（'.hipsF'）.value）；
体脂=495/（1.0324-0.19077*数学对数10（（腰部*2.54）-（颈部*2.54））+0.15456*数学对数10（身高*2.54））-450；
};
document.querySelector（'.calculate'）.addEventListener（'click'，result）；
document.querySelector（'.bf'）.value=Math.round（bodyfat）；
脂肪=体重*（体脂/100）；
document.querySelector（'.fat'）。value=Math.round（fat）；
瘦体重=体重-脂肪；
document.querySelector（'.lm'）。value=Math.round（leanMass）；
};
结果（）；

问题是，当您在末尾调用result时，您的变量还没有像这一行那样的值

document.querySelector（'.bf'）。value=Math.round（bodyfat）所以bodyfat是未定义的，这会导致Math.round（bodyfat）抛出NaN
您应该检查Chrome DevTools，以便能够调试并找到此错误。
您应该在函数中声明变量。为了更好地使用UX，在满足所有选项后，您应该有一个用于计算的按钮。谢谢。我要让它工作。我最终去掉了结果函数，并将代码放入了阳性函数和阴性函数中。我如何让结果函数从阳性函数和阴性函数中读取信息？我正在尝试使用“不重复”原则。如果您这样做：document.querySelector（'.calculate'）.addEventListener（'click'，result'）；函数result（）document.querySelector（'.bf'）.value=Math.round（bodyfat）；脂肪=体重*（体脂/100）；						...    };
应该可以，但如果您想改进代码并删除html和js上的重复内容，请阅读以下内容：