我试图让用户输入项目添加到列表中,然后找到列表中所有项目的总和。当然,这只适用于数字,我会有提示用户只输入数字的说明,但如何从用户输入的列表中获取项目总和?
我当前的代码只将用户输入的文本输入到文本框中,然后将这些项放入列表中。
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type='text' id='input' />
<input type='button' value='add to list' id='add' />
<ul id='list'>
<li> <b>Topics</b></li>
</ul>
<script type="text/javascript">
document.getElementById("add").onclick = function() {
var text = document.getElementById("input").value;
var li = document.createElement("li");
li.innerText = text;
document.getElementById("list").appendChild(li);
}
</script>
</body>
</html>
将其添加到名为sum
的变量中,并使用.innerHTML
在页面上显示总和。
由于输入是一个字符串,因此使用parseInt()
将其转换为数字,这样当您将它添加到sum时,它实际上会添加并且不会仅将项添加到sum的末尾。
下面的代码段有效。
var sum = 0;
document.getElementById("add").onclick = function() {
var text = document.getElementById("input").value;
var li = document.createElement("li");
li.innerText = text;
sum += parseInt(text);
document.getElementById("list").appendChild(li);
document.getElementById("sum").innerHTML = sum;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type='text' id='input' />
<input type='button' value='add to list' id='add' />
<ul id='list'>
<li> <b>Topics</b></li>
</ul>
<h3 id="sum">0</h3>
</body>
</html>
您可以使用dataset
属性保留当前总和,并为每个新的li
更新该属性。
<ul id='list' data-total="0">...</ul>
list.dataset.total = Number(list.dataset.total) + Number(text);
let list = document.getElementById("list");
let sum = document.getElementById("sum");
document.getElementById("add").onclick = function() {
let text = document.getElementById("input").value;
let li = document.createElement("li");
li.innerText = text;
list.appendChild(li);
list.dataset.total = Number(list.dataset.total) + Number(text);
sum.textContent = list.dataset.total;
}
<input type='text' id='input' />
<input type='button' value='add to list' id='add' />
<ul id='list' data-total="0">
<li><b>Topics (<span id='sum'></span>)</b></li>
</ul>