Как суммировать все значения с определенных div и выводить в другом div?

Question

[Stacy None]

На сайте установлен модуль который выводит картинки и под каждой картинкой генерируется цифра
Нужен скрипт который бы искал все элементы <span id='number'>$number</span>
и складывал эти числа, затем выводил результат в отдельный div.

Answer 1

[Дмитрий]

document.querySelector('body').innerHTML +=
    Array.from(document.querySelectorAll('span#number')).reduce((div, el) => {
        div[1]+=(+el.innerHTML || 0); return div;
    }
    , ['<div>', 0, '</div>']).join('');

Comments

[Stacy None]

а как использовать? Подскажите пожалуйста. Как вывести в div с id "summ"

[Дмитрий]

document.querySelector('div#summ').innerHTML =
    Array.from(document.querySelectorAll('span#number'))
        .reduce( (sum, el) => sum+=(+el.innerHTML || 0), 0);

Answer 2

[Andrew]

id должен быть уникальным.
Ищите по классу или родителю

let blocks = document.querySelectorAll('.parent span'),
result = document.querySelector('#result'),
multiplier = 0;
addPlus(block,whereToAdd){
block.forEach(function(el){
multiplier +=el.innerHTML;
})
result.innerHTML = multiplier;
}
addPlus(blocks,result);

Comments

[Stacy None]

подскажите пожалуйста подробней! Как мне вставить это в html страницу?
в тег

<script>
</script>

Спасибо!

[uRoot]

Stacy None, можно и в тег <script>
Можно и в отдельный файл, только без тега script, а потом его подключить:<script src="ваш_файл.js"></script>