为什么要回NaN?

时间:2017-07-18 14:34:40

标签: javascript html5

我试图将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>

7 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

这是因为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

答案 2 :(得分:0)

您正在使用返回集合的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>

答案 3 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:0)

这是因为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;

答案 5 :(得分:0)

如果您尝试获取单个元素,则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>

答案 6 :(得分:-2)

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

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