Как сложить числа из div?

Question

[Demon]

Пример:

<div id="load_numAll-shet" style="display:none">
<div data="10" id="load_numAll" >10</div>
<div data="50" id="load_numAll" >50</div>
<div data="70" id="load_numAll" >70</div>
<div data="80" id="load_numAll" >80</div>
</div>
<div id="load_numAll-show"></div>

Как можно сложить все числа data и вывести в div сложенную сумму!.

Comments

[Андрей]

не очень хорошо использовать одинаковое ID в 4 местах, лучше на класс переделайте

Answer 1

[Александр]

var items = document.getElementById('load_numAll-shet').innerText;
var sum = items.split('\n').reduce(function(a,b){return a*1+b*1});
document.getElementById('load_numAll-show').innerHTML = sum;

Comments

[Алексей Уколов]

Ну зачем работать с элементами, как с текстом? Чтобы несколько строк кода сэкономить? Стоит чуть структуру поменять и всё ломается - jsfiddle.net/koceg/2nror8nz

[Александр]

Алексей Уколов: Какой вопрос такой ответ, а что если потом вообще надо будет сделать вводимые поля, тогда и ваш вариант не будет работать.

[Алексей Уколов]

OneFive: вопрос был "как сложить числа внутри элементов", а не "как сложить числа внутри элементов, каждый из которых находится на отдельной строке". Структура html важна для задачи (нельзя безболезненно добавить элементы или изменить способ хранения чисел), но решение, которое зависит от переносов строк - это плохое решение.

[Aves]

Вообще в вопросе

все числа data

так что лучше

var items = document.querySelectorAll('#load_numAll-shet div[data]');
var sum = Array.prototype.reduce.call(items, function(s, e) {
    return +e.getAttribute('data') + s;
}, 0);
document.querySelector('#load_numAll-right').innerHTML = sum;

Answer 2

[Виталий Инчин ☢]

1. Атрибута data, как такого, не существует, используйте data-* атрибуты.
2. Задавать нескольким элементом одинаковый id нельзя, существуют классы.
3. Для чего нужен лишний атрибут, если внутри блоков такое же значение?
4. Почитайте какие-нибудь книжки про валидную верстку.

<ul id="load_numAll-shet" style="display:none">
   <li data-n="10" class="load_numAll-li">10</li>
   <li data-n="50" class="load_numAll-li">50</li>
   <li data-n="70" class="load_numAll-li">70</li>
   <li data-n="80" class="load_numAll-li">80</li>
</ul>
<output id="load_numAll-show"></output>

var output = document.querySelector("#load_numAll-show"),
   lies = document.querySelectorAll(".load_numAll-li");

output.value = Array.prototype.reduce.call(
   lies, function(p, t){
      return p + (+t.dataset.n);
    }, 0
);

Comments

[Aves]

как-то многовато операторов в reduce, можно просто return +t.dataset.n + p;

[Виталий Инчин ☢]

Aves: да, поправил

Answer 3

[Николай Шабалин]

В общем на Ваши ошибки Вам уже указали повторяться не буду. Мой вариант с Вашим кодом вот такой.

HTML

<div id="load_numAll-shet" style="display:none">
    <div data-num="10" id="load_numAll" >10</div>
    <div data-num="50" id="load_numAll" >50</div>
    <div data-num="70" id="load_numAll" >70</div>
    <div data-num="80" id="load_numAll" >80</div>
</div>
<div id="load_numAll-show"></div>

jQuery

var $showBox = $('#load_numAll-show');
var $numbers = $('#load_numAll-shet div');
var sum = 0;

$numbers.each(function() {
    sum += parseInt($(this).data('num'));
});

$showBox.text(sum);

Чуть иначе на JS

var $showBox = document.getElementById('load_numAll-show');
var $numbers = document.querySelectorAll('#load_numAll-shet div');
var sum = 0;

for(var i = 0; i < $numbers.length; i++) {
    sum += Number($numbers[i].dataset.num);
}

$showBox.innerText = sum;

Поиграться можно здесь

Answer 4

[newimageru]

А как сложить числа динамически? Не подскажете? Есть блок в inputami? выбранные передаются в #load_numAll-shet.