在 JavaScript 中输入返回 NaN答案

【问题标题】：Input returning NaN in JavaScript在 JavaScript 中输入返回 NaN
【发布时间】：2020-06-16 06:47:57
【问题描述】：

您好，我是 js 新手，正在尝试创建一个简单的计算，但结果始终为 NaN 这是我的代码：

const calculator = document.getElementById("calculator");

var firstNumber = document.getElementsByClassName("firstNumber").value;

var secondNumber = document.getElementsByClassName("secondNumber").value;

calculator.addEventListener('submit', function() {

  event.preventDefault();

  var result = firstNumber * secondNumber;

  alert(result);

})

<form id="calculator">

  <input type="number" class="firstNumber" min="1" value="1">

  <input type="number" class="secondNumber" min="1" value="1">

  <input type='submit'>

</form>

【问题讨论】：

标签： javascript nan

【解决方案1】：

您的问题是 getElementsByClassName 返回一个数组。相反，请尝试将它们编入索引：

const calculator = document.getElementById("calculator");
var firstNumber = document.getElementsByClassName("firstNumber")[0].value;
var secondNumber = document.getElementsByClassName("secondNumber")[0].value;
calculator.addEventListener('submit', function(){
    event.preventDefault(); 
    var result = firstNumber * secondNumber;
    alert(result);
});

另一个~问题~是你没有转换为数字，input 返回一个字符串。这是一种风格选择，因为 javascript 会隐式转换为数字，但请尝试使用 parseFloat:

var firstNumber = parseFloat(document.getElementsByClassName("firstNumber")[0].value);
var secondNumber = parseFloat(document.getElementsByClassName("secondNumber")[0].value);

   const calculator = document.getElementById("calculator");

calculator.addEventListener('submit', function(){
  event.preventDefault();
  var firstNumber = document.getElementsByClassName("firstNumber")[0].value;
  var secondNumber = document.getElementsByClassName("secondNumber")[0].value;
  var result = firstNumber * secondNumber;
  alert(result);
})

<form id="calculator">
<input type="number" class="firstNumber" min="1" value="1">
<input type="number" class="secondNumber" min="1" value="1">
<input type='submit'>
</form>

【讨论】：

【解决方案2】：

您的代码中有两个问题：

1) 您需要在提交函数中获取值，否则它们会在初始页面加载时获取，并且不会根据用户实际输入的内容进行更新。

2) （这是导致您的NaN 结果的直接原因）：document.getElementsByClassName 返回一个HTMLCollection - 即表示一个可能包含许多元素的集合的结构。（这是有道理的，因为您可以拥有给定类的多个元素。）因此，拥有value 属性实际上没有意义——而且它没有。我通过简单地使用[0] 索引访问器来获取第一个这样的元素来修复下面的问题 - 但您可能希望用id 替换该类并改用document.getElementById（它确实返回一个元素）。

请参阅下面的工作版本，上面已修复。

const calculator = document.getElementById("calculator");

calculator.addEventListener('submit', function(){
  event.preventDefault();
  var firstNumber = document.getElementsByClassName("firstNumber")[0].value;
  var secondNumber = document.getElementsByClassName("secondNumber")[0].value;
  var result = firstNumber * secondNumber;
  alert(result);
})

<form id="calculator">
<input type="number" class="firstNumber" min="1" value="1">
<input type="number" class="secondNumber" min="1" value="1">
<input type='submit'>
</form>

【讨论】：

【解决方案3】：

这两个值都是字符串，因此您必须在处理它们的函数中将它们转换为 number 。试试const result = Number(firstNumber) * Number(secondNumber);

【讨论】：