15.05.2023, 07:40
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от Сергей Ракипов
|
|
если мне нужно два section
|
хоть десять, добавьте цикл по секциям(классам)
заменить на for в строку 132, и уточнить переменные согласно этому циклу - строка 133 и подобные, и всё.
Последний раз редактировалось рони, 15.05.2023 в 07:55.
|
|
15.05.2023, 08:00
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от рони
|
|
добавьте цикл по секциям(классам)
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
font-family: monospace;
font-size: .8rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
.calculation {
max-width: 480px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_all {
margin: 10px auto;
font-size: 2rem;
}
.sum label {
display: block;
text-align: right;
margin: 0 auto;
}
.sum {
font-size: 1.2rem;
display: flex;
flex-direction: column;
margin: 5px auto;
}
.all .num {
color: red;
}
</style>
</head>
<body>
<section class="calculation">
<div class="total_all"></div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</section>
<section class="calculation">
<div class="total_all"></div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</section>
<script>
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
for(const section of document.querySelectorAll('.calculation')) {
const total = section.querySelector('.total_all');
section.addEventListener('change', function({
target
}) {
let input = target.closest('input');
if (input) {
let all = target.closest('.all input');
if (all) target.closest('.sum').querySelectorAll('.number input').forEach(input => (input.checked = all.checked))
else if (target.checked) target.closest('.sum').querySelector('.all input').checked = true;
else target.closest('.sum').querySelector('.all input').checked = target.closest('.sum').querySelector('.number :checked')
}
let num = 0;
for (const div of section.querySelectorAll('.sum')) {
const checked = div.querySelector('.all input').checked;
let n = [...div.querySelectorAll('.number')].reduce((n, label) => {
let input = label.querySelector('input');
let up = +label.querySelector('.num').textContent.replace(/\s/g, '');
return input.checked ? n + up : n
}
, 0)
div.querySelector('.all .num').textContent = digits(n);
if (checked) num += n
}
total.textContent = digits(num);
})
let event = new Event("change");
section.dispatchEvent(event);}
</script>
</body>
</html>
|
|
16.05.2023, 02:56
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
рони,
 спасибо, вы столько раз мне подарили чувства благодарности в течении не одного года, спасибо!!
|
|
16.05.2023, 13:43
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Не получается у меня сложить конечный результат.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
font-family: monospace;
font-size: .8rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
.calculation {
max-width: 480px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_all {
margin: 10px auto;
font-size: 2rem;
}
.sum label {
display: block;
text-align: right;
margin: 0 auto;
}
.sum {
font-size: 1.2rem;
display: flex;
flex-direction: column;
margin: 5px auto;
}
.all .num {
color: red;
}
.details{
font-size: .8;
color: grey;
}
</style>
</head>
<body>
<section class="calculation">
<p>С прошлой встречи 10 000</p>
<p>Приход</p>
<div class="total_all">
</div>
<p>Итого</p>
<div class="total_minus">
22 000
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">1 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">1 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">1 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">1 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</section>
<section class="calculation">
<p>Итого 22 000</p>
<p>Расходы</p>
<div class="total_all">
</div>
<div class="total">
</div>
Остаток после расходов
<div class="total_plus">
14 000
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
Командировка
<label class="number">
<span class="num">4 000</span>
<input type="checkbox" checked="checked">
</label>
<div class="details">
Проезд
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
Проживание
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">1 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">1 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">1 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">1 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</section>
<script>
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
for (const section of document.querySelectorAll('.calculation')) {
const total = section.querySelector('.total_all');
section.addEventListener('change', function ({
target
}) {
console.log("target", target);
let input = target.closest('input');
console.log("input", input);
if (input) {
let all = target.closest('.all input');
console.log("all", all);
if (all) {
let sum = target.closest('.sum').querySelectorAll('.number input').forEach(input => (input.checked = all.checked));
console.log("sum1", sum)
}
else if (target.checked) {
let sum = target.closest('.sum').querySelector('.all input').checked = true
console.log("sum2", sum)
}
else {
let sum = target.closest('.sum').querySelector('.all input')
target.closest('.sum').querySelector('.all input').checked = target.closest('.sum').querySelector('.number :checked')
console.log("sum3", sum)
}
}
let num = 0;
console.log("section", section);
for (const div of section.querySelectorAll('.sum')) {
const checked = div.querySelector('.all input').checked;
let n = [...div.querySelectorAll('.number')].reduce((n, label) => {
let input = label.querySelector('input');
let up = Number(label.querySelector('.num').textContent.replace(/\s/g, ''));
return input.checked ? n + up : n
}
, 0)
div.querySelector('.all .num').textContent = digits(n);
if (checked) num += n
}
total.textContent = digits(num);
})
let event = new Event("change");
section.dispatchEvent(event);
}
</script>
</body>
</html>
Вот первый блок section он отображает ПРИХОД и если я нажимаю галочки то и в блоке total_minus происходят изменения то есть убираю 2 000 то в total_minus становится 20 000
А во втором блоке тоже самое только если я убираю расходы то в блоке total_plus происходит измение к примеру я убираю галочку 1 000 то и в total_plus становится 15 000
И еще пункт который расписывает так же галочками более подробно то есть командировочные 4 000 в них входит 2 000 проезд и 2 000 проживание измение на галочках так же меняет все цифры.
|
|
18.05.2023, 06:02
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Я вроде разорался в коде, и начал делать все правильно. Но ломается, а ошибки нет.
Я заново его написал, с теми задачами которые я поставил. Но он не работает до конца. То есть он не возращает сумму когда поставил галочку. Там конечно нужно дальше код писать, но принцип понятен.
<!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>
Почему сумма не возвращается когда поставил галочку?
|
|
18.05.2023, 07:26
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
|
Все решил проблему, разбираюсь дальше
|
|
18.05.2023, 07:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Сергей Ракипов,
|
|
19.05.2023, 07:02
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Вот я все понимаю как оно работает и знаю из за чего у меня не получается. Но не получается сложить математику.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
font-family: monospace;
font-size: 1rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
section {
max-width: 480px;
margin: 0px auto 0px;
}
.total_all {
margin: 40px 0px 40px 0px;
font-size: 2rem;
}
.sum label {
display: block;
width: 150px;
text-align: right;
}
.sum {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0px 0px 0px 0px;
}
.all {
padding: 10px 0px 10px 0px;
}
.all .num {}
.color {
color: rebeccapurple;
}
.podrobnee {
padding: 0px 0px 0px 20px;
}
.razdel {
padding: 30px 0px 30px 0px;
}
</style>
</head>
<body>
<section class="section">
<div class="total_all"></div>
<div class="sum razdel">
<label class="all color">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">4 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">4 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all color">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<div class="podrobnee">
<label class="number">
<span class="num">3 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">3 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</div>
</div>
</section>
<script>
const section = document.querySelector('.section');
const total = document.querySelector('.total_all');
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
section.addEventListener('change', function ({
target
}) {
let input = target.closest('input');
if (input) {
let all = target.closest('.all input');
if (all) target.closest('.sum').querySelectorAll('.number input').forEach(input => (input.checked = all.checked))
else if (target.checked) target.closest('.sum').querySelector('.all input').checked = true;
else target.closest('.sum').querySelector('.all input').checked = target.closest('.sum').querySelector('.number :checked')
}
let num = 0;
for (const div of document.querySelectorAll('.sum')) {
const checked = div.querySelector('.all input').checked;
let n = [...div.querySelectorAll('.number')].reduce((n, label) => {
let input = label.querySelector('input');
let up = +label.querySelector('.num').textContent.replace(/\s/g, '');
return input.checked ? n + up : n
}
, 0)
div.querySelector('.all .num').textContent = digits(n);
if (checked) num += n
}
total.textContent = digits(num);
})
let event = new Event("change");
section.dispatchEvent(event);
</script>
</body>
</html>
То есть у меня all лишний раз складывает.
Итоговая сумма должна быть 16 000 но получается 22 000 из за того что all лишний раз сложился. И я пробую по разному но у меня не получается правильно сложить.
Последний раз редактировалось Сергей Ракипов, 19.05.2023 в 07:15.
|
|
19.05.2023, 09:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Сергей Ракипов,
слишком много зависимостей ... 
|
|
19.05.2023, 10:36
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Сообщение от рони
|
Сергей Ракипов,
слишком много зависимостей ...
|
то есть для этих целей лучше другой написать, просто это не все задачи которые я ставил. |
|
|
|
