Javascript 为什么会这样_Javascript_Function_Calculator_Nan

Javascript 为什么会这样

javascript function

Javascript 为什么会这样,javascript,function,calculator,nan,Javascript,Function,Calculator,Nan,无论我尝试什么，我都无法使函数正常运行我试着检查输入是数字，只有输出给我NaN。我试着把parseInt放在输入端，但输入端似乎工作正常。这可能是新手犯的一个小错误，不管怎样，谢谢你抽出时间 const principle=parseInt(document.getElementsByClassName('principle').value); const rate = parseInt(document.getElementsByClassName('.rate').value); cons

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

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


利息计算器
初始金额
利率
付款数量
提交
我只希望输出是一个数字

因为typeof NaN也是一个数字

console.log（typeof NaN）

您的JS中有两个错误

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);
    };

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

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


让兴趣；
函数计算（）{
const princil=parseInt（（document.getElementsByClassName（'princil'）[0]）.value）；
const rate=parseInt（（document.getElementsByClassName（'rate'）[0]）.value）；
const payments=parseInt（（document.getElementsByClassName（'payments'）[0]）.value）；
控制台日志（类型（原则））；
控制台日志（原理）；
控制台日志（类型（速率））；
控制台日志（速率）；
控制台日志（付款类型）；
控制台日志（付款）；
利息=（利率/付款）*原则；
console.log（利息）；
};
利息计算器
初始金额
利率
付款数量
提交

您的

parseInt

调用仅在页面加载时发生一次，即当输入没有值，并且

parseInt（“”==NaN

时。将您的

parseInt

调用移动到

函数calculate（）

内部。您还需要防止被零除。谢谢。还有一个问题。如果我用8.4作为利率，它只考虑8。我怎样才能让它也识别十进制数呢？如果要用parseInt解析为int，请使用parseFloat保留小数@zrwhite151