我试图将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>
答案 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唯一标识的单个元素。
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;
答案 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;
}