Автоматический подсчет суммы с разными типами ввода в JavaScript

Оффтоп javascript
1

У меня есть код на JavaScript для автоматического подсчета суммы значений из полей ввода. Я хочу добавить в него обработку чекбоксов. Идея в том, чтобы при отметке чекбокса его значение тоже учитывалось в общей сумме.

Вот мой текущий код:

function calculateSum() {
  let total = 0;
  const inputs = document.querySelectorAll('input');
  inputs.forEach(input => {
    if (input.type === 'text') {
      total += parseInt(input.value) || 0;
    }
  });
  document.getElementById('result').textContent = total;
}

А вот пример разметки:

<input type='text' onkeyup='calculateSum()'>
<input type='text' onkeyup='calculateSum()'>
<input type='checkbox' value='50' onclick='calculateSum()'>
<span id='result'></span>

Проблема в том, что чекбокс не учитывается при подсчете. Как можно это исправить? Буду благодарен за помощь!

2

Попробуй сократить код через метод reduce. Например:

function calculateSum() {
const total = […document.querySelectorAll(‘input’)].reduce((sum, input) => (input.type===‘text’ || input.checked ? +input.value : 0), 0);
document.getElementById(‘result’).textContent = total;
}

Такой подход делает код компактнее. Что думаешь?

3

В твоем коде не хватает обработки чекбоксов. Вот как можно это исправить:

function calculateSum() {
  let total = 0;
  document.querySelectorAll('input').forEach(input => {
    if (input.type === 'text' || (input.type === 'checkbox' && input.checked)) {
      total += +input.value || 0;
    }
  });
  document.getElementById('result').textContent = total;
}

Тут мы проверяем тип инпута и его состояние для чекбоксов. Использую унарный плюс для преобразования в число - так короче. Это должно решить твою проблему.

4

привет! я недавно решал похожую задачу. вот что можно сделать - добавь в функцию обработку чекбоксов:

function calculateSum() {
  let total = 0;
  const inputs = document.querySelectorAll('input');
  inputs.forEach(input => {
    if (input.type === 'text') {
      total += parseInt(input.value) || 0;
    } else if (input.type === 'checkbox' && input.checked) {
      total += parseInt(input.value) || 0;
    }
  });
  document.getElementById('result').textContent = total;
}

теперь сумма будет учитывать значение отмеченных чекбоксов. не забудь добавить атрибут value для чекбоксов в разметке. надеюсь, это поможет!