为什么这会返回 NaN答案

【问题标题】：Why does this return NaN为什么这会返回 NaN
【发布时间】：2020-01-07 21:24:15
【问题描述】：

无论我尝试什么，我都无法让函数正常运行

我试过检查输入是数字，只有输出给我 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

【问题讨论】：

您的parseInt 调用仅在页面加载时发生一次，即输入没有值时，以及parseInt("") == NaN。将您的 parseInt 调用移至 function calculate() 内部。
你还需要注意被零除。

标签： javascript function calculator nan

【解决方案1】：

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

<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>

【讨论】：

【解决方案2】：

您的 JS 中有 2 个错误。

1) getByClassName 返回一个元素数组，所以你必须选择你想要的元素，因为你只有一个元素，你可以很容易地做到document.getElementsByClassName('rate')[0]

2) 在您加载页面的那一刻，您分配您的值。但是当您填写文档并计算时，您不会再次检查该值。所以它们仍然是未定义的。

如果你修复所有问题，你会得到这个 JS

const principle$ = document.getElementsByClassName('principle')[0];
const rate$ = document.getElementsByClassName('rate')[0];
const payments$ = document.getElementsByClassName('payments')[0];
let interest;



    function calculate() {
    console.log(principle$, principle$.value)
        const principle = parseInt(principle$.value);
        const rate = parseInt(rate$.value);
        const payments = parseInt(payments$.value);
      interest = (rate / payments) * principle;

      console.log(interest);
    };

https://codepen.io/crocsx-the-styleful/pen/MWgOLgm

【讨论】：

谢谢。还有一个问题。如果我使用 8.4 作为利率，它只考虑了 8。我怎样才能让它也识别小数？
你正在用 parseInt 解析为 int，使用 parseFloat 保留小数 @zrwhite151

【解决方案3】：

因为 NaN 的 typeof 也是一个数字

console.log(typeof NaN)

当您执行 JS 代码时，变量在函数之外，因此在脚本加载后立即计算，在此期间您的输入保持空字符串

console.log(parseInt(''), typeof parseInt(''))

您需要在函数内移动变量，以便在按下提交按钮时评估它们

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);
  let interest;

  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>

另外你使用getElementsByClassName返回一个节点列表，你需要使用索引访问特定节点

【讨论】：