时间戳

首页 > 解决方案 > 为什么这会返回 NaN

javascript - 为什么这会返回 NaN

问题描述

无论我尝试什么，我都无法让该功能正常运行

我试过检查输入是数字，只有输出给我 NaN。我尝试将 parseInt 放在输入周围，但输入似乎工作正常。这可能是一个小的新手错误，无论如何感谢您的时间！

const principle=parseInt(document.getElementsByClassName('principle').value);
const rate = parseInt(document.getElementsByClassName('.rate').value);
const payments = parseInt(document.getElementsByClassName('payments').value);
let interest;



function calculate() {
  console.log(typeof(principle));
  console.log(typeof(rate));
  console.log(typeof(payments));

  interest = (rate / payments) * principle;

  console.log(interest);
};




    <body>
        <h1>interest calculator</h1>

    <div class="container">
      <div class="row">
        <div class="col-4-md">
          initial amount <input type="number" name="" value="" class="principle px-3">
        </div>

        <div class="col-4-md">
          interest rate <input type="number" name="" value="" class="rate px-3">

        </div>

        <div class="col-4-md">
          Number of payments <input type="number" name="" value="" class="payments px-3">
        </div>
        <button type="submit" name="button" onclick="calculate()">Submit</button>
      </div>
    </div>


i just want the output to be a number

标签： javascriptfunctioncalculatornan

解决方案

这是修改/修复后的工作代码：

<html>
    <head>

        <script>

            let interest;

            function calculate() {

                const principle=parseInt((document.getElementsByClassName('principle')[0]).value);
                const rate = parseInt((document.getElementsByClassName('rate')[0]).value);
                const payments = parseInt((document.getElementsByClassName('payments')[0]).value);

                console.log(typeof(principle));
                console.log(principle);
                console.log(typeof(rate));
                console.log(rate);
                console.log(typeof(payments));
                console.log(payments);

                interest = (rate / payments) * principle;

                console.log(interest);
            };
        </script>
    </head>
    <body>
            <h1>interest calculator</h1>

        <div class="container">
          <div class="row">
            <div class="col-4-md">
              initial amount <input type="number" name="" value="" class="principle px-3">
            </div>

            <div class="col-4-md">
              interest rate <input type="number" name="" value="" class="rate px-3">

            </div>

            <div class="col-4-md">
              Number of payments <input type="number" name="" value="" class="payments px-3">
            </div>
            <button type="submit" name="button" onclick="calculate()">Submit</button>
          </div>
        </div>
    </body>
</html>

推荐阅读