为什么这个 return NaN

Question

无论我怎么尝试，我都无法正确地获得运行的功能

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

Answer 1

因为 typeof NaN 也是一个数字

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，其中 returns 是一个节点列表，您需要使用索引

访问特定节点

Answer 2

你的 JS 有 2 个错误。

1) getByClassName return 一个元素数组，所以你必须 select 在你的情况下你想要哪个元素，因为你只有一个元素，你可以很容易地做到 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

Answer 3

这是 modifications/fixes 之后的工作代码：

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

为什么这个 return NaN

Why does this return NaN

javascript

function

calculator

nan