爲什麼要返回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>