Question

我试图将2个数字相乘，我得到NaN作为结果，为什么？

function myFunction() {
  var x = document.getElementsByClassName("input1").value;
  var y = document.getElementsByClassName("input2").value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Answer 1

因为当使用getElementsByClassName时，会返回一个类似于数组的对象，并且需要指定与指定数组元素索引的方式类似的元素，例如： getElementsByClassName("input1")[0]。如果您使用唯一标识符（如ID），则无需担心。

尝试：

function myFunction() {
  var x = document.getElementsByClassName("input1")[0].value;
  var y = document.getElementsByClassName("input2")[0].value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Answer 2

这是因为getElementsByClassName没有像jQuery那样返回HTML对象，它返回一个HTML集合（类似于数组），你必须使用document.getElementsByClassName("input1")[0]来访问元素：< / p>

function myFunction() {
  var x = document.getElementsByClassName("input1")[0].value;
  var y = document.getElementsByClassName("input2")[0].value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Document.getElementsByClassName（）：返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时，将搜索完整文档，包括根节点。您也可以在任何元素上调用getElementsByClassName（）;它将仅返回具有给定类名的指定根元素的后代元素。

您可以详细了解 here 。

Answer 3

您正在使用返回集合的getElementsByClassName。您需要引用0索引来获取它的值。否则，您可以使用id属性

function myFunction() {
  var x = document.getElementsByClassName("input1")[0].value;
  var y = document.getElementsByClassName("input2")[0].value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Answer 4

您的问题是因为document.getElementsByClassName会返回数组。如果要将2个特定文本框的值加在一起，您可以通过唯一ID更好地引用它们。我已将输入更改为具有唯一id属性，并使用document.getElementById的代码返回由其ID唯一标识的单个元素。

＆＃13;

function myFunction() {
  var x = document.getElementById("input1").value;
  var y = document.getElementById("input2").value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

＆＃13;

<input type="text" id="input1">
<input type="text" id="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

＆＃13;

Answer 5

这是因为document.getElementsByClassName("input1").value;返回字符串/文本值。这使var result = x * y;不可能，因为你不能对文本执行算术运算。要解决这个问题，请做一点操作

var x = parseInt(document.getElementsByClassName("input1").value);
  var y = parseInt(document.getElementsByClassName("input2").value);
  var result = x * y;
  document.getElementById("results").innerHTML = result;

Answer 6

如果您尝试获取单个元素，则getElementsByClassName不是正确的调用方法，因为它返回元素的“实时”节点列表，即使在您确实需要的情况下也是如此元素列表。

相反，由于您的input元素可以由他们每个人使用的不同类别单独识别，querySelector()是正确的方法，可以单独使用每个元素。

此外，请勿使用内联HTML事件处理属性（onclick等）， here's why 。

现在，即使您只关注相关的单个元素，所有HTML元素也只包含一种类型的数据，即字符串。在对它们进行数学运算之前，必须将这些字符串转换为数字

// Get a reference to the button
var btn = document.getElementById("calc");

// Set up a click event handler for the button
btn.addEventListener("click", myFunction);

function myFunction() {
  // Get just the single elements you need and then trim any leading
  // or trailing spaces off of the user's input and then convert that
  // input into a number:
  var x = parseFloat(document.querySelector(".input1").value.trim());
  var y = parseFloat(document.querySelector(".input2").value.trim());
  var result = x * y;
  
  // Don't use innerHTML when you are suppling HTML as the value
  // use textContent instead. This will perform better.
  document.getElementById("results").textContent = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button id="calc">Calculate</button>
<br>
<p id="results">Results</p>

Answer 7

您正在尝试将两个字符串相乘。这样做

function myFunction() {
  var x = parseInt(document.getElementsByClassName("input1").val());
  var y = parseInt(document.getElementsByClassName("input2").val());
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

为什么要回NaN？

7 个答案: