Хотел бы найти сумму value у выбранных checkbox с помощью метода forEach. Checkbox имеют одинаковый name

Question

Не понимаю почему не получается получить сумму 2-ух (или более) checkbox с одинаковыми name с помощью проверки условия checked == true и цикла forEach...

<!DOCTYPE html>
<html>
  <body>
    <input type="checkbox" name="digits" value="10" id="ten">
    <label for="ten">10</label>
    
    <input type="checkbox" name="digits" value="10" id="ten">
    <label for="ten">10</label>
    
    <p>
      Ответ: <span class="result"></span>
    </p>
    
    <button class="btn">
      Решить
    </button>
    
    
    <script>
      digits = document.querySelectorAll('[name="digits"]')
      result = document.querySelector(".result");
      btn = document.querySelector(".btn");
      total = 0;
      
      btn.addEventListener("click", function() {
        digits.forEach(element => {
          if (element.checked){
            total += parseInt(element.value);
            result.textContent = total.value;
          }
        })
      })
      
    </script>
  </body>
</html>

Answer 1

Как минимум у total нет value %))

А вообще, total надо внести в функцию клика, чтобы он постоянно не увеличивался

digits = document.querySelectorAll('[name="digits"]')
result = document.querySelector(".result");
btn = document.querySelector(".btn");

btn.addEventListener("click", function() {
  let total = 0;

  digits.forEach(element => {
    if (element.checked) {
      total += parseInt(element.value);
    }
  })

  result.textContent = total;
})

<input type="checkbox" name="digits" value="10" id="ten">
<label for="ten">10</label>

<input type="checkbox" name="digits" value="10" id="ten">
<label for="ten">10</label>

<p>
  Ответ: <span class="result"></span>
</p>

<button class="btn">Решить </button>

БЛОГ НА HUSL

Хотел бы найти сумму value у выбранных checkbox с помощью метода forEach. Checkbox имеют одинаковый name

Ответы (1 шт):