Как суммировать значения value в select option?

Question

[Junior Development]

Задача: вывести значение value в класс sum

<select class="select">
	<option class="option" value="1">Пункт 1</option>
	<option class="option" value="2">Пункт 2</option>
	<!-- option может быть больше -->
</select>

<select class="select">
	<option class="option" value="1">Пункт 1</option>
	<option class="option" value="2">Пункт 2</option>
	<!-- option может быть больше -->
</select>

<div class="sum"></div>

Comments

[Сергей Соколов]

Что пробовали и что не получается? jQuery используете или чистый JS?

[Junior Development]

Сергей Соколов, чистый JS

Значение value с одного select могу вывести, а вот как суммировать их все не могу сообразить.
Знаний не хватает.

let select = document.querySelectorAll('.select');

	for (let i = 0; i < select.length; i++) {
	select[i].onchange = function(){
	summ.innerHTML = this.value
	}
};

Answer 1

[0xD34F]

По наличию какого класса будем опознавать элементы, которые должны быть подвергнуты суммированию; куда надо записывать сумму; и как эту сумму посчитать:

const className = 'select';
const sumEl = document.querySelector('.sum');
const sum = elements =>
  Array.prototype.reduce.call(
    elements,
    (acc, n) => acc + (+n.value || 0),
    0
  );

Делегирование, назначаем обработчик события change один раз:

const updateSum = () => sumEl.textContent = sum(document.getElementsByClassName(className));
document.addEventListener('change', e => e.target.classList.contains(className) && updateSum());
updateSum();

Или, назначаем обработчик каждому элементу индивидуально:

const selects = document.querySelectorAll(`.${className}`);
const updateSum = () => sumEl.innerText = sum(selects);
selects.forEach(n => n.addEventListener('change', updateSum));
updateSum();

Comments

[Сергей Соколов]

почему не innerText, а textContent?

[0xD34F]

Сергей Соколов, не вижу причин предпочесть одно другому.

[Junior Development]

0xD34F, можете написать другой вариант выполнения? (насколько это возможно)
К примеру без стрелочной функции.
На данный момент тяжеловато в понимании.
Знаний маловато.