如何从用户输入的列表中获取项目的总和答案

【问题标题】：How to take the sum of items from a list from a user input如何从用户输入的列表中获取项目的总和
【发布时间】：2019-03-17 08:38:24
【问题描述】：

我试图让用户输入添加到列表中的项目，然后找到列表中所有项目的总和。当然，这只适用于数字，我会有提示用户只输入数字的说明，但是如何从用户输入的列表中获取项目的总和？

我当前的代码只获取用户输入文本框中的文本，然后将这些项目放入列表中。

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

【问题讨论】：

标签： javascript html html-lists user-input

【解决方案1】：

将其添加到名为sum 的变量中，并使用.innerHTML 在页面上显示总和。

由于输入是字符串，使用parseInt() 将其转换为数字，这样当您将其添加到 sum 时，它实际上会添加而不只是将项目添加到 sum 的末尾。

下面的 sn-p 有效。

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>

【讨论】：

【解决方案2】：

您可以使用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>

【讨论】：