在 JavaScript 中输入返回 NaN

Question

嗨，我是 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>

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

Answer 2

您的代码中只有两个问题：

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

2）（这是您的NaN结果的直接原因）： document.getElementsByClassName返回一个HTMLCollection - 即表示可能许多元素的集合的结构。 （这是有道理的，因为您可以拥有给定 class 的多个元素。）因此，拥有value属性并没有真正意义。 我通过简单地使用[0]索引访问器来获取第一个这样的元素来修复下面的问题 - 但您可能希望将 class 替换为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>

Answer 3

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