Я вроде разорался в коде, и начал делать все правильно. Но ломается, а ошибки нет.
Я заново его написал, с теми задачами которые я поставил. Но он не работает до конца. То есть он не возращает сумму когда поставил галочку. Там конечно нужно дальше код писать, но принцип понятен.
<!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>
body{
font-size: 1rem;
font-family: 'Courier New', Courier, monospace;
}
.calculation {
margin: 0px auto 0px;
max-width: 280px;
}
.total {
margin: 20px 0px 20px 0px;
font-size: 1.2rem;
}
.balance {
padding: 5px 0px 5px 0px;
}
.arrival {
padding: 5px 0px 5px 0px;
}
.total_amount {
padding: 5px 0px 5px 0px;
}
.aumont {
margin: 20px 0px 20px 0px;
font-weight: 900;
}
.aumont_title {
}
.number {
}
.sum {
}
.checkbox {
}
.details_block {
padding: 10px 0px 0px 20px;
color: grey;
font-size: .8rem;
font-weight: 400;
}
.details {
padding: 5px 0px 5px 0px;
}
.description {
}
</style>
</head>
<body>
<div class="calculation">
<div class="total">
<div class="balance">
<div class="balance_title">
Остаток с прошлого собрания
</div>
<div class="balance_sum">
10 000
</div>
</div>
<div class="arrival">
<div class="arrival_title">
Приход на текущее собрания
</div>
<div class="arrival_sum">
</div>
</div>
<div class="total_amount">
<div class="total_amount_title">
Общая сумма
</div>
<div class="total_amount_sum">
22 000
</div>
</div>
</div>
<div class="aumont summa">
<div class="aumont_title">
Предстовитель №1
</div>
<label class="all_sum number">
<span class="sum">
6 000
</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="details_block">
<div class="details">
<label class="number_details">
<span class="sum_details">3 000</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="description">
Проезд
</div>
</div>
<div class="details">
<label class="number_details">
<span class="sum_details">3 000</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="description">
Проживание
</div>
</div>
</div>
</div>
<div class="aumont summa">
<div class="aumont_title">
Предстовитель №2
</div>
<label class="all_sum number">
<span class="sum">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="details_block">
<div class="details">
<label class="number_details">
<span class="sum_details">2 000</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="description">
Проезд
</div>
</div>
<div class="details">
<label class="number_details">
<span class="sum_details">2 000</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="description">
Проживание
</div>
</div>
</div>
</div>
<div class="aumont summa">
<div class="aumont_title">
Предстовитель № 3
</div>
<label class="all_sum number">
<span class="sum">
2 000
</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="details_block">
<div class="details">
<label class="number_details">
<span class="sum_details">1 000</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="description">
Проезд
</div>
</div>
<div class="details">
<label class="number_details">
<span class="sum_details">1 000</span>
<input type="checkbox" checked="checked" class="checkbox">
</label>
<div class="description">
Проживание
</div>
</div>
</div>
</div>
</div>
<script>
const balanceSum = document.querySelector(".balance_sum");
// const arrivalSum = document.querySelector(".arrival_sum");
const totalAmountSum = document.querySelector(".total_amount_sum");
// const calculation = document.querySelectorAll(".calculation");
const sum = document.querySelectorAll(".sum");
const sumDetails = document.querySelectorAll(".sum_details");
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
for (const calculation of document.querySelectorAll('.calculation')) {
const arrivalSum = document.querySelector(".arrival_sum");
calculation.addEventListener('change', function ({
target
}) {
let input = target.closest('input');
if (input) {
let all_sum = target.closest('.all_sum input');
if (all_sum) target.closest('.summa').querySelectorAll('.number input').forEach(input => (input.checked = all_sum.checked))
else if (target.checked) target.closest('.summa').querySelector('.all_sum input').checked = true;
else target.closest('.summa').querySelector('.all_sum input').checked = target.closest('.summa').querySelector('.number :checked')
}
let sum = 0;
for (const div of calculation.querySelectorAll('.summa')) {
const checked = div.querySelector('.all_sum input').checked;
let n = [...div.querySelectorAll('.number')].reduce((n, label) => {
let input = label.querySelector('input');
let up = + label.querySelector('.sum').textContent.replace(/\s/g, '');
return input.checked ? n + up : n
}
, 0)
div.querySelector('.all_sum .sum').textContent = digits(n);
if (checked) sum += n
}
arrivalSum.textContent = digits(sum);
})
let event = new Event("change");
calculation.dispatchEvent(event);
}
</script>
</body>
</html>
Почему сумма не возвращается когда поставил галочку?