Как сложить значения value в js, что бы они выводились используя события change + checkbox?
Не понимаю как прописать вывод суммы значений value выбранных чекбоксов (когда чекбокс снимается, сумма должна уменьшаться).
resultElement.textContent = selectedContactValues.join(", "); вот в этом месте нужно вывести(через цикл или как вообще)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
label{display:inline-block; width: 100px;}
div{margin-bottom: 20px;}
</style>
</head>
<body>
<p>Выберите способ связи:</p>
<div>
<input type="checkbox" id="contactChoice1" name="contact" value=50>
<label for="contactChoice1">По email</label>
</div>
<div>
<input type="checkbox" id="contactChoice2" name="contact" value=80>
<label for="contactChoice2">По телефону</label>
</div>
<div>
<input type="checkbox" id="contactChoice3" name="contact" value=20>
<label for="contactChoice3">По почте</label>
</div>
<button class="btn">Отправить</button>
<p>Выбранный способ: <span class="result"></span></p>
<script src="js/main.js"></script>
</body>
</html>
resultElement = document.querySelector(".result"); //получаем элемент с классом result
radioButtons = document.querySelectorAll('[name="contact"]'); //получаем список всех checkbox элементов
let selectedContactValues = []; //массив для хранения выбранных checkbox
radioButtons.forEach(element => { //для каждого элемента из списка элементов checkbox
element.addEventListener("change", function(){ //при изменении элемента
if(element.checked){ //если checkbox-кнопка выбрана
selectedContactValues.push(element.value); //добавляем значение в массив выбранных
} else { //иначе удаляем из массива выбранных
selectedContactValues.splice(selectedContactValues.indexOf(element.value),1)
}
if (selectedContactValues.length != 0) { //если массив не пустой (т.е. длина массива не равна 0)
resultElement.textContent = selectedContactValues.join(", "); // <b>Как вот тут все это дело вывести?</b>
} else {
resultElement.textContent = "ничего не выбрано." //иначе записываем в resultElement, что ничего не выбрано
}
});
});