Как взять сумму элементов из списка из пользовательского ввода - PullRequest
Новая
       20

Как взять сумму элементов из списка из пользовательского ввода

0 голосов
/ 17 марта 2019

Я пытаюсь добавить элементы пользовательского ввода в список, а затем найти сумму всех элементов в списке.Конечно, это будет работать только с числами, и у меня будут инструкции, предлагающие пользователю вводить только цифры, но как мне получить сумму элементов из списка, который поступает от ввода пользователя?

Только мой текущий кодполучает текст, который вводит пользователь, в текстовое поле, а затем эти элементы помещаются в список. 

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

Ответы [ 2 ]

0 голосов
/ 17 марта 2019

Вы можете сохранить текущую сумму, используя атрибут 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>
0 голосов
/ 17 марта 2019

Добавьте его в переменную с именем sum и используйте .innerHTML, чтобы отобразить сумму на странице.

Поскольку вход является строкой, используйте parseInt(), чтобы превратить его в число, чтобы при добавлении его к сумме оно фактически добавлялось, а не просто добавляло элемент кконец суммы.

Фрагмент ниже работает. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...