Как суммировать значения 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]

document.addEventListener('change', function(e) {
  if (e.target.classList.contains('select')) {
    document.querySelector('.sum').textContent = Array
      .from(document.querySelectorAll('.select'))
      .reduce((acc, n) => acc + +n.value, 0);
  }
});

Comments

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

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

[0xD34F]

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

[Junior Development]

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