为什么要返回NaN？

Question

我试图乘以2个数字，我得到NaN作为结果，为什么？使用getElementsByClassName当你得到类似阵列的对象返回并需要指定的方式类似的元件指定的数组元素，例如的索引

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("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不会返回HTML对象如jQuery，它返回一个HTML集合（阵列等），你必须使用document.getElementsByClassName("input1")[0]访问元素：

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

您试图乘两个字符串。 做到这一点

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

Answer 5

你的问题是因为document.getElementsByClassName返回阵列。如果您想将两个特定文本框的值相加，您最好通过唯一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; 
 
}

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

Answer 6

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

如果你想获得一个单一的元素，那么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>