Как прибавить цену элементов, выбранных через checkbox, к уже существующей цене?

Question

[Glebash111]

Всем привет! В общем есть форма. Изначально в ней уже есть определенная цена (500). У пользователя есть вариант выбрать дополнительные услуги, у которых тоже есть своя цена. И нужно, чтобы цена за выбранные услуги суммировалась с изначальной ценой (например, 500 + выбранная услуга за 300 будет = 800р если я уберу галочку то цена останется 500).

Вот мой код HTML :

<form name="Sum">    
   	<div class="form-check">
      	<label><input type="checkbox" class="form-check-input" name="" id="service1" value="300" cost="300"> услуга 1 (300₽)</label>
    </div>
    <div class="form-check">
      <div class="mb-3">
      <label><input type="checkbox" class="form-check-input" name="" id="service2" value="500" cost="500" > услуга 2 (500₽)</label>
      </div>
    </div>
    </form>
    <div class="pr-5">
      <strong>Всего: </strong> <span id="sum">500</span> <i >₽</i>
    </div>

Вот код JS. ЗДЕСЬ ПРОБЛЕМА в том, что при прибавлении цены из чекбоксов, у меня прибавляется цена, которая уже до этого была здесь. т.е если я уберу галочку с чекбокса, цена останется. И если я добавлю чекбокс снова, то цена просто прибавится к той цене, что там была, в общем бред получается:

var s = document.forms.Sum,
    d = s.querySelectorAll('input[type="checkbox"]');

s.onchange = function() { // начало работы функции сложения
  var tariff = document.getElementById('sum').innerHTML
  console.log(typeof(tariff)); // проверяю тип
  var tarif = Number(tariff) // задаю числовой тип
  console.log("тут тариф " + tarif)
  console.log(typeof(tarif));
  itog = 0
  var n = s.querySelectorAll('[type="checkbox"]')
  for(var j=0; j<n.length; j++)
    if (n[j].checked){
      tarif += parseFloat(n[j].value)
    }else{
      tarif
    }
    tarif 
    console.log(tarif)
    document.getElementById('sum').innerHTML = tarif;
}

Вот другой код JS. ЗДЕСЬ ПРОБЛЕМА в том, что при активации чекбокса, у меня пропадает первоначальное значение.
ЕСЛИ я уберу itog=0 то браузер выдаст ошибку:

var s = document.forms.Sum,
    d = s.querySelectorAll('input[type="checkbox"][value=""]');

s.onchange = function() { // начало работы функции сложения
  var n = s.querySelectorAll('[type="checkbox"]'),
      itog = 0;
  for(var j=0; j<n.length; j++)
    if (n[j].checked){
    	itog += parseFloat(n[j].value)
    }else{
    	itog;
    } 
    document.getElementById('sum').innerHTML = itog;
}

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

Comments

[Сергей Сергей]

var n = s.querySelectorAll('[type="checkbox"]'),
-itog = 0;
+itog = 500;
for(var j=0; j<n.length; j++)

[lookingfor2]

const currentSum = document.getElementById("sum");
  const checkboxArray = Array.from(document.querySelectorAll('[type="checkbox"]'));

  checkboxArray.map(item => item.addEventListener('change', function() {
     if(this.checked){
      currentSum.innerText = (+currentSum.innerText + + this.value).toString()
    }else{
      currentSum.innerText -= this.value
    }
  }))

[Glebash111]

lookingfor2, то же самое выдает

Uncaught TypeError: Cannot read properties of null (reading 'innerText')
at HTMLInputElement.

PS. Тоже работает, разобрался. Спасибо!

[Glebash111]

Сергей Сергей, В принципе работает, если написать так:

itog = 0;
  itog += 500;

Но опять же, у меня значение не всегда равно 500, а подставляя значения, как я писал ниже в коммах, у меня выползает ошибка

PS: Все заработало и с твоим кодом. Спасибо, Сергей Сергей

[Сергей Сергей]

Значит первичное значение нужно извлечь и где-то сохранить.

[Glebash111]

Сергей Сергей, не, все заработало и с твоим кодом, спасибо большое!

Answer 1

[Чипекве]

const sumForm = document.forms.Sum;
const totalBlock = document.querySelector('#sum');
const baseValue = 500;

sumForm.addEventListener('change', () => {
    const checkedImputValues = Array.from(
        document.querySelectorAll('.form-check-input:checked'),
        input => Number(input.value)
    );

    const servicesSum = (checkedImputValues.length !== 0)
        ? checkedImputValues.reduce((a, b) => a + b)
        : 0;

    totalBlock.textContent = servicesSum + baseValue;
});

Comments

[Glebash111]

интересное решение, но почему-то выдает ошибку

Uncaught TypeError: Cannot set properties of null (setting 'textContent')
at HTMLFormElement.

Возможно дело в том, что у меня значение sum не всегда равно 500, он может равняться как 500, так и 600, 200, 100 и т.д
Я чуть-чуть подправил код, но все то же самое выдает:

const sumForm = document.forms.Sum;
const totalBlock = document.querySelector('#sum');
var currentSum = document.getElementById("sum");
const summ = Number(currentSum);
var baseValue = summ;

sumForm.addEventListener('change', () => {
const checkedImputsValues = Array.from(
document.querySelectorAll('.form-check-input:checked'),
input => Number(input.value)
);

const servicesSum = (checkedImputsValues.length !== 0)
? checkedImputsValues.reduce((a, b) => a + b)
: 0;

totalBlock.textContent = servicesSum + baseValue;
});

[Чипекве]

Cannot set properties of null (setting 'textContent')

Значит нет элемента с id = "sum".

const baseValue = Number(totalBlock.textContent);
Вместо

var currentSum = document.getElementById("sum");
const summ = Number(currentSum);
var baseValue = summ;

[Glebash111]

Чипекве, все работает! Огромное спасибо!