Question

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

ive尝试检查输入是否为数字，并且只有输出给我NaN。香港专业教育学院试图把parseInt放在输入周围，但输入表示正常工作。这可能是一个小小的newb错误，无论如何，感谢您的时间！

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

以下是修改/修复后的有效代码：

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

Answer 2

因为NaN的类型也是一个数字

' The Movie: The Game',
' The Legend of Corgi',
' Dinosaur Diner']

new_list = []
for temp in games_list:
    temp = temp.strip()
    new_list.append(temp)

print (new_list)

当您使用JS代码执行变量时，该变量在函数外部，因此，在脚本加载后立即计算该变量，在此期间，您的输入内容包含空字符串

console.log(typeof NaN)

您需要在函数内移动变量，以便在按下提交按钮时对它们进行求值

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>返回节点列表，您需要使用索引访问特定节点

Answer 3

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

为什么返回NaN

3 个答案: