HTML javascript函數問題。 [對象HTMLInputElement]錯誤輸出

我想做一個簡單的HTML頁面，有兩個文本框和一個按鈕，點擊時將兩個數字相加。在我的輸出中，我只得到[object HTMLInputElement]。HTML javascript函數問題。 [對象HTMLInputElement]錯誤輸出

function addNumbers(A, B){ 
 
    var answer = A + B; 
 
    document.getElementById("testResult").innerHTML = answer; 
 
}

<input type="text" value="15" id="varA"> 
 
<input type="text" value="30" id="varB"> 
 
<input type="button" value="Add" onclick="addNumbers(varA, varB)"> 
 
<h1 id="testResult"></h1>

任何幫助，將不勝感激。我已經嘗試將.innerHTML更改爲.value，但因此我沒有得到任何結果。

來源

2014-10-05 Xfmym

'varA'是'input'元件，而不是它的值，這將是'varA.value'。但是，在將它們添加到一起之前，您需要將其更改爲數字，否則最終會出現字符串連接。 – 2014-10-05 18:12:22

注意'input'元素沒有內容，因此您可以使用''或''，但不能''。 – Oriol 2014-10-05 18:50:15

我假設你想要的數學總和而不是字符串連接。如果是這樣的話，你可以使用以下方法：基於評論

UPDATE：

function addNumbers(elem1, elem2) { 
 
    var a = document.getElementById(elem1).value; 
 
    var b = document.getElementById(elem2).value; 
 
    var c = Number(a) + Number(b); 
 
    document.getElementById("testResult").innerHTML = c; 
 
}

<input type="text" value="15" id="varA"> 
 
<input type="text" value="30" id="varB"> 
 
<input type="button" value="Add" onclick="addNumbers('varA', 'varB')"></input> 
 
<h1 id="testResult"></h1>

這裏的工作小提琴：http://jsfiddle.net/JohnnyEstilles/ex09fx7k/。

來源

2014-10-05 18:18:54 JME

雖然有效，但addNumbers不再適用於任何其他元素類型。 – 2014-10-05 18:23:00

然後，您可以簡單地將元素的ID作爲字符串傳遞給函數。我已經更新了我的答案。 – JME 2014-10-05 18:25:15

我也更新了小提琴。 – JME 2014-10-05 18:27:04

一些修補：

你加入了輸入元素，而不是他們的value。
要將其字符串值轉換爲數字，可以使用一元+。
取代內聯事件偵聽器，最好使用addEventListener。

var a = document.getElementById('varA'), 
 
    b = document.getElementById('varB'), 
 
    result = document.getElementById("testResult"); 
 

 
document.getElementById('add').addEventListener('click', function() { 
 
    addNumbers(a.value, b.value); 
 
}); 
 

 
function addNumbers(n1, n2){ 
 
    result.textContent = +n1 + +n2; 
 
}

<input type="text" value="15" id="varA"> 
 
<input type="text" value="30" id="varB"> 
 
<input type="button" id="add" value="Add"> 
 
<h1 id="testResult"></h1>

來源

2014-10-05 18:57:54 Oriol

HTML javascript函數問題。 [對象HTMLInputElement]錯誤輸出

回答

相關問題