Запись в div сумм из нескольких span динамически по классу, как реализовать?

Question

[Gradient1712]

Есть 31 div блок, это максимально возможное число дней в месяце. У каждого div-а свой id, и у всех общий класс. Также есть 1 select и 2 input-а (это first, second и third), в которые я проставляю данные, и из которых динамически добавляю в div с нужным мне днем часы, и не просто ставлю туда textContent, а если в select был выбран например прогул, то в div пишется span со значением

div.innerHTML = `<span class="progul">${first.value}</span>`

если были рабочие часы - то в div пишется span со значением

div.innerHTML = `<span class="blue">${second.value}</span>`

При ремонте также пишется span, но уже с классом green, на все эти классы в CSS прописаны разные цвета, и в итоге я вижу 31 ячейку с разными цветами. Иногда в одной ячейке может быть например 7 часов на работе и 3 часа на ремонте, тогда в ячейку разными цветами пишется 7+3. Мне нужно прописать код, чтобы в два итоговых div-а динамически при изменении каждого из 31 верхних div-ов ставились итоговые данные. Первый div с id="outHours" должен считать все часы, проведенные на ремонте, то есть он должен пробежать 31 div, найти в нем все span с классом green, обязательно проверить содержимое на число, и если там числа, то сложить их все и выдать итог в textContent, если там будет текст - то считать его как 0. А вот второй div с id="outDays" должен считать только целые дни, проведенные на ремонте. То есть, он также проверяет все 31 div, ищет все span с классом green внутри, проверяет содержимое на число, а дальше смотрит, есть ли еще другие span в этом диве. Если других рядом нет, и если там больше 0 часов на ремонте - то должен писаться +1 день в итог. Если там есть хотя бы 1 час на работе, и 9 часов на ремонте, 1+9, то это уже не считается днем ремонта, это рабочий день, и в итог должно писаться +0 дней. Я попытался решить это так - с помощью getElementsByClassName('green') получаю HTML Collection, потом с forEach превращаю ее в массив, проверяю на числа, складываю и записываю в div.textContent. Найденный в интернете код отлично работает, когда берет данные из инпутов, но не работает со span с разными классами. Вот сам код:
HTML

<div id="cell01" class="use cellFrom1to31"></div>
        <div id="cell02" class="use cellFrom1to31">
          <span class="progul">П</span>
        </div>
        <div id="cell03" class="use cellFrom1to31">
          <span class="progul">П</span>
        </div>
        <div id="cell04" class="use cellFrom1to31"></div>
        <div id="cell05" class="use cellFrom1to31"></div>
        <div id="cell06" class="use cellFrom1to31">
          <span class="blue">6</span>
        </div>
        <div id="cell07" class="use cellFrom1to31">
          <span class="blue">7</span>
        </div>
        <div id="cell08" class="use cellFrom1to31">
          <span class="blue">8</span>
        </div>
        <div id="cell09" class="use cellFrom1to31"></div>
        <div id="cell10" class="use cellFrom1to31"></div>
        <div id="cell11" class="use cellFrom1to31">
          <span class="green">1</span>
        </div>
        <div id="cell12" class="use cellFrom1to31">
           <span class="green">2</span>
        </div>
        <div id="cell13" class="use cellFrom1to31">
           <span class="green">3</span>
        </div>
        <div id="cell14" class="use cellFrom1to31"></div>
        <div id="cell15" class="use cellFrom1to31">
           <span class="green">12</span>
        </div>
        <div id="cell16" class="use cellFrom1to31"></div>
        <div id="cell17" class="use cellFrom1to31"></div>
        <div id="cell18" class="use cellFrom1to31">
           <span class="blue">3</span>+<span class="green">5</span>
        </div>
        <div id="cell19" class="use cellFrom1to31"></div>
        <div id="cell20" class="use cellFrom1to31"></div>
        <div id="cell21" class="use cellFrom1to31">
           <span class="blue">8</span>+<span class="green">2</span>
        </div>
        <div id="cell22" class="use cellFrom1to31"></div>
        <div id="cell23" class="use cellFrom1to31">
           <span class="blue">1</span>+<span class="green">4</span>
        </div>
        <div id="cell24" class="use cellFrom1to31"></div>
        <div id="cell25" class="use cellFrom1to31"></div>
        <div id="cell26" class="use cellFrom1to31"></div>
        <div id="cell27" class="use cellFrom1to31"></div>
        <div id="cell28" class="use cellFrom1to31"></div>
        <div id="cell29" class="use cellFrom1to31"></div>
        <div id="cell30" class="use cellFrom1to31"></div>
        <div id="cell31" class="use cellFrom1to31"></div>
        
        <br><br><br>
        Итого часов на ремонте: <div id="outHours">?</div>
        <br>
        Итого дней на ремонте: <div id="outDays">?</div>

CSS

.progul {
    color: rgb(182, 7, 7);
}

.blue {
    color: rgb(8, 8, 218);
}

.green {
    color: rgb(7, 165, 7);
}

JS

let outHours = document.querySelector('#outHours');
let outHoursSum = document.document.getElementsByClassName('green');

for(let i = 0; i < outHoursSum.forEach.length; i++){  
  outHoursSum[i].addEventListener('change', function updateResults(){
  let sum = 0;
  outHoursSum.forEach(b =>{b = parseFloat(b.textContent);sum = !isNaN(b) ? sum + b : sum;})
  outHours.textContent = sum.toFixed(0);
  });
}

И вот этот же пример на JSFiddle

В данном приведенном примере в итоге вместо знаков вопроса должно быть 29 часов и 4 дня, как это реализовать?

Comments

[Алексей Дубровин]

Понятия не имею почему это не отваливается сразу как только запускается.
Пробую переписать для человека. Не хочу разбираться что до как. Мб если делать это понятнее вам станет легче разбираться в своём коде.

let outHours = document.querySelector('#outHours');
let outHoursSum = document.document.getElementsByClassName('green'); 

function calcFunc(){
 let sum = 0;
  outHoursSum.forEach(item =>{
      item = parseFloat(b.textContent); // вот это что, зачем перетирать ?)
     sum = !isNaN(item) ? sum + item : sum;
  })
  outHours.textContent = sum.toFixed(0);
}

outHoursSum.forEach(item=>{
    item.addEventListener('change', calcFunc);
})

[Gradient1712]

Алексей Дубровин, Огромное спасибо! Ваш пример так и не заработал, даже после удаления лишнего document во второй строке, консоль ругалась на то, что outHoursSum.forEach - это не функция, к HTML Collection метод forEach не применяется, обернул outHoursSum в Array.from(), и консоль перестала сыпать ошибки, но и работать не начала, и тут я понял, что событие addEventListener('change'); не срабатывает, начал гуглить, и действительно, все дело в том, что change на span элементах не работает, а работает только на "This event is limited to input elements, textarea boxes and select elements", так что я пошел гуглить в сторону MutationObserver, спасибо что натолкнули меня на интересную мысль!

[Алексей Дубровин]

Gradient1712,
Зачем вам MutationObserver.
Вы же изменения где-то вызываете, там и дёргайте функцию.

[Gradient1712]

Удалось решить вопрос с помощью простого querySelectorAll. Как оказалось, он может искать не только по классу или по id, а еще и элементы по CSS селектору, в моем коде если в ячейке один span, то к div-у не применялись стили, а вот когда их два, я добавлял атрибут style="display:inline-block", чтобы цифры шли друг за другом, а не один над другим и не вылезали за границы ячейки, поиск на div-ы с таким стилем сработал так:

document.querySelectorAll('div[style="display:inline-block"]')