如何在简单的DOM练习中添加两个数字

Question

我正在尝试添加2个数字，并将结果显示在页面的正文中。我特意去掉了HTML代码，只是为了更容易查看。让我头疼的是JS。

有什么想法吗？

let input1 = document.getElementById('item1');
let input2 = document.getElementById('item2');
let button = document.querySelector('button');
button.onclick = function() {
let firstNumber = input1.value;
input1.value = '';
let secondNumber = input2.value;
input2.value = '';
// Here I am clueless
input1.focus();
input2.focus();
}

<h1>Calculator</h1>
<div>
<label for="item">Enter a number in each field:</label>
<input type="text" id="item1">
<input type="text" id="item2">
<button>Add numbers</button>
</div>

谢谢你的建议。欢呼

Answer 1

首先，您需要将输入转换为正确的类型。html输入返回字符串，您需要整数。

let firstNumber = parseInt(input1.value);
let secondNumber = parseInt(input2.value);

然后求和

let sum = firstNumber + secondNumber;

最后将结果添加到HTML正文

document.body.appendChild(document.createTextNode(sum));

Answer 2

我会以列表的形式创建一个结果区域，并保存结果的历史记录。

您可以为每次提交创建一个新的列表项。

const input1  = document.getElementById('item1');
const input2  = document.getElementById('item2');
const button  = document.querySelector('button');
const results = document.querySelector('.results');
button.onclick = (e) => {
const num1 = parseInt(input1.value, 10);
input1.value = '';
const num2 = parseInt(input2.value, 10);
input2.value = '';
// Here I am clueless
const element = document.createElement('li');
element.textContent = `${num1} + ${num2} = ${num1 + num2}`;
results.append(element);
input1.focus();
}

<h1>Calculator</h1>
<div>
<label for="item">Enter a number in each field:</label>
<input type="text" id="item1">
<input type="text" id="item2">
<button>Add numbers</button>
</div>
<h2>Results</h2>
<ul class="results">
</ul>

这里有一个更简洁的版本：

const
args    = document.querySelectorAll('.arg'),
btn     = document.querySelector('button'),
results = document.querySelector('.results');
const getAndReset = (input) => {
const value = parseInt(input.value, 10);
input.value = '';
return value;
};
btn.addEventListener('click', (e) => {
const
values = [...args].map(getAndReset),
result = values.reduce((acc, val) => acc + val, 0),
element = document.createElement('li');

element.textContent = `${values.join(' + ')} = ${result}`;
results.append(element);
args[0].focus();
});

<h1>Calculator</h1>
<div>
<label for="item">Enter a number in each field:</label>
<input type="number" class="arg" />
<input type="number" class="arg" />
<button>Add numbers</button>
</div>
<h2>Results</h2>
<ul class="results">
</ul>

Answer 3

要写入页面，请使用innerHtml或innerText此外，从inputs返回的值是字符串而不是数字。您可以简单地通过前缀加一个加号将它们转换为数字，例如+input1.value

let input1 = document.getElementById('item1');
let input2 = document.getElementById('item2');
let button = document.querySelector('button');

button.onclick = function() {
//write the results to page 


let firstNumber = input1.value;
input1.value = '';
let secondNumber = input2.value;
input2.value = '';

// Here I am clueless
document.getElementById('result').innerHTML  = 'Result:  '+ (+firstNumber  + +secondNumber);
input1.focus();
input2.focus();
}

<h1>Calculator</h1>
<div>
<label for="item">Enter a number in each field:</label>
<input type="text" id="item1">
<input type="text" id="item2">
<button onclick="calculate()">Add numbers</button>
</div>
<div id="result"></div>

'Result:'+(+firstNumber++secondNumber(的解释

在本声明中，我们在以下三个位置使用了+，具有以下功能：

1.'Result: '+(+firstNumber + +secondNumber);
用于连接JS中的字符串。即结果：&在这种情况下，将输入的总和相加，形成Result: 3

2.'Result: '+ (+firstNumber +++secondNumber);
这两个加号用于将字符串转换为数字。例如，如果firstNumber是"1"(带引号的字符串(，则使用类似+firstNumber的加号将其转换为1(不带引号的数字(。进行此转换很重要，因为否则您将获得"1"+"2"="12"，而不是1+2=3

3.'Result: '+ (+firstNumber++secondNumber);第三个加号用于firstNumber和secondNumber的简单数学加法

Answer 4

let input1 = document.getElementById('item1');
let input2 = document.getElementById('item2');
let button = document.querySelector('button');
let result = document.getElementById("result");
function calculate() {
sum = +input1.value + +input2.value;
result.innerHTML = sum;
}

<h1>Calculator</h1>
<div>
<label for="item">Enter a number in each field:</label>
<input type="text" id="item1">
<input type="text" id="item2">
<p>Result: <span id="result"></span> </p>
<button onclick="calculate()">Add numbers</button>
</div>