@Gradient1712

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

Есть 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 дня, как это реализовать?
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы