如何在Javascript的一个文本框中添加两个数字？

Question

JavaScript代码为：

function add(){
  var addThs = document.getElementById('demo').value;
}

HTML代码为：

<input type="text" id="demo">
<button onclick="add()">Add</button>

Answer 1

您可以使用split()来获取操作数数组，并使用reduce()来获取和。

请注意：以下解决方案也适用于多个+，例如（5+7+9+6）：

function add(){
  var el = document.getElementById('demo');
  var val = el.value.split('+');
  el.value = val.reduce((a,c)=> a + Number(c), 0);
}

<input type="text" id="demo">
<button onclick="add()">Add</button>

Answer 2

首先，用+符号将字符串分开：

document.getElementById('demo').value.split('+');

将返回两个元素组成的数组（假设输入正确）。

我正在使用destructuring assignment将第一个分配给a，将第二个分配给b：

var input = document.getElementById('demo').value;
var [a,b] = input.split('+');

然后，将变量分配给元素的textContent属性。

别忘了将这些字符串转换为实际的整数，以使操作有效。

---

这是完整的代码：

function add() {
  var input = document.getElementById('demo').value;
  var [a,b] = input.split('+');
  document.getElementById('show').textContent = parseInt(a) + parseInt(b);
}

<input type="text" id="demo">
<button onclick="add()">Add</button>

<div id="show"></div>