Question

我正在尝试创建一个简单的html页面，其中包含两个文本框和一个按钮，可在单击时将这两个数字相加。在我的输出中，我只获得[object 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，但结果却一无所获。

Answer 1

我假设你想要数学和而不是字符串连接。如果是这种情况，您可以使用以下内容：

根据评论更新：

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/。

Answer 2

一些修正：

您正在添加输入元素而不是value。
要将其字符串值转换为数字，您可以使用一元+。
更好地使用addEventListener。

＆＃13;

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

＆＃13;

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

＆＃13;

HTML javascript函数问题。 [object HTMLInputElement]错误输出

2 个答案: