20.05.2023, 11:15
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,777
|
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
background-color: #27405C;
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
.calculator {
max-width: 200px;
margin: 0px auto 0px;
}
label{
display: flex;
align-items: center;
justify-content: space-between;
}
.total_amount {
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.sum {
margin-top: 8px;
}
.sum>.number,
.sum>.sum {
margin-left: 15px;
}
</style>
</head>
<body>
<div class="sum calculator">
<div class="total total_amount">
<span class="value"></span>
</div>
<div class="sum">
<label class="total">
<span class="value"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">3 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">5 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="total">
<span class="value"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">4 000</span>
<input type="checkbox" checked="checked">
</label>
<div class="sum">
<label class="total">
<span class="value"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">1 500</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">7 500</span>
<input type="checkbox" checked="checked">
</label>
</div>
</div>
</div>
<script>
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
const getValue = (elem) => {
if (elem.classList.contains('number')) {
return elem.querySelector('input').checked
? +elem.querySelector('.value').textContent.replace(/\s/g, '')
: 0
} else if (elem.classList.contains('sum')) {
sum(elem);
const total = elem.querySelector(':scope>.total');
return total.querySelector('input').checked
? +total.querySelector('.value').textContent.replace(/\s/g, '')
: 0
}
}
const sum = (elem) => {
const total = elem.querySelector('.total');
const sumElems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
const s = sumElems.reduce((a, el) => a + getValue(el), 0);
total.querySelector('.value').textContent = digits(s);
}
const setCheckedSum = (elem, checked) => {
const total = elem.querySelector('.total');
const elems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
if (total) {
total.querySelector('input').checked = checked;
}
elems.forEach (el => {
if (el.classList.contains('number')) {
el.querySelector('input').checked = checked;
} else if (el.classList.contains('sum')) {
setCheckedSum(el, checked);
}
})
}
const testChecked = (elem) => {
if (elem.classList.contains('number'))
return elem.querySelector('input').checked;
const total = elem.querySelector('.total');
const elems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
const checked = elems.reduce ((ch, el) => testChecked(el) || ch, false)
const input = total.querySelector('input');
if (input) input.checked = checked;
return checked;
}
const calculator = document.querySelector('.calculator');
sum(calculator);
calculator.addEventListener('change', ev => {
const {target} = ev;
const el = target.closest('.total');
if (el) {
const sum = el.closest('.sum');
setCheckedSum(sum, target.checked);
} else {
testChecked(calculator);
}
sum(calculator);
})
</script>
</body>
</html>
|
|
20.05.2023, 12:05
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
voraa,
|
|
20.05.2023, 12:09
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
|
voraa,
я же правильно понял что она работает по принципу
<!-- общая сумма sum > sum > sum -->
|
|
20.05.2023, 13:03
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Я тут не много дописал код и у меня вопрос
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
background-color: #27405C;
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
.history_plus{
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.future_plus{
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.history_minus{
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.future_minus{
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.calculator {
max-width: 200px;
margin: 0px auto 0px;
}
label {
display: flex;
align-items: center;
justify-content: space-between;
}
.total_amount {
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.sum {
margin-top: 8px;
}
.sum>.number,
.sum>.sum {
margin-left: 15px;
}
</style>
</head>
<body>
<div class="sum calculator">
<div class="history_minus">
38 000
</div>
<div class="total total_amount">
<span class="value"></span><!-- общая сумма sum > sum > sum -->
</div>
<div class="future_minus">
<!-- 17 000 -->
</div>
<div class="sum">
<label class="total">
<span class="value"></span><!-- общая сумма -->
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">3 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">5 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="total">
<span class="value"></span><!-- общая сумма sum > sum -->
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">4 000</span>
<input type="checkbox" checked="checked">
</label>
<div class="sum">
<label class="total">
<span class="value"></span><!-- общая сумма sum -->
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">1 500</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">7 500</span>
<input type="checkbox" checked="checked">
</label>
</div>
</div>
</div>
<script>
const historyPlus = document.querySelector(".history_plus");
const historyMinus = document.querySelector(".history_minus");
const futurePlus = document.querySelector(".future_plus");
const futureMinus = document.querySelector(".future_minus");
const totalAmount = document.querySelector(".total_amount");
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
const getValue = (elem) => {
if (elem.classList.contains('number')) {
return elem.querySelector('input').checked
? +elem.querySelector('.value').textContent.replace(/\s/g, '')
: 0
} else if (elem.classList.contains('sum')) {
sum(elem);
const total = elem.querySelector(':scope>.total');
return total.querySelector('input').checked
? +total.querySelector('.value').textContent.replace(/\s/g, '')
: 0
}
}
const sum = (elem) => {
const total = elem.querySelector('.total');
const sumElems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
const s = sumElems.reduce((a, el) => a + getValue(el), 0);
total.querySelector('.value').textContent = digits(s);
}
const setCheckedSum = (elem, checked) => {
const total = elem.querySelector('.total');
const elems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
if (total) {
total.querySelector('input').checked = checked;
}
elems.forEach(el => {
if (el.classList.contains('number')) {
el.querySelector('input').checked = checked;
} else if (el.classList.contains('sum')) {
setCheckedSum(el, checked);
}
})
}
const testChecked = (elem) => {
if (elem.classList.contains('number'))
return elem.querySelector('input').checked;
const total = elem.querySelector('.total');
const elems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
const checked = elems.reduce((ch, el) => testChecked(el) || ch, false)
const input = total.querySelector('input');
if (input) input.checked = checked;
return checked;
}
const calculator = document.querySelector('.calculator');
sum(calculator);
calculator.addEventListener('change', ev => {
const { target } = ev;
const el = target.closest('.total');
if (el) {
const sum = el.closest('.sum');
setCheckedSum(sum, target.checked);
} else {
testChecked(calculator);
}
sum(calculator);
const result = Number(historyMinus.textContent.replace(/\s/g, '')) - Number(totalAmount.textContent.replace(/\s/g, ''));
futureMinus.textContent = digits(result);
})
</script>
</body>
</html>
Не большую часть которая просто минусует суммы.
Как мне сделать так что бы блок futureMinus сразу же отображался при загрузки старинцы, а не ждал пока кликнут на чекбокс
|
|
20.05.2023, 13:48
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,777
|
|
|
Я не могу что то делать и обдумывать, когда задача ставится по кускам.
Только начинаешь понимать и придумываешь алгоритм, как оказывается надо еще что то, к чему данный алгоритм не очень подходит.
Да и постановку задачи надо излагать четче.
Я так и не понял, что должно быть в futureMinus
Я просто на данном примере показал, как с помощью querySelectorAll искать непосредственно детей (через :scope>)
И то что для данной задачи, где одинаковые блоки информации вложены друг в друга нужна рекурсия.
Последний раз редактировалось voraa, 20.05.2023 в 13:51.
|
|
20.05.2023, 13:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
voraa,
есть некая базовое число -- вычисленные суммы должны вычитаться из этого числа.
|
|
20.05.2023, 14:00
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,777
|
|
|
Сообщение от рони
|
|
вычисленные суммы должны вычитаться из этого числа.
|
сумм ы или сумм а? |
|
20.05.2023, 14:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
voraa,
строка 149
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
background-color: #27405C;
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
.history_plus {
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.future_plus {
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.history_minus {
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.future_minus {
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.calculator {
max-width: 200px;
margin: 0px auto 0px;
}
label {
display: flex;
align-items: center;
justify-content: space-between;
}
.total_amount {
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.sum {
margin-top: 8px;
}
.sum>.number,
.sum>.sum {
margin-left: 15px;
}
</style>
</head>
<body>
<div class="sum calculator">
<div class="history_minus">
38 000
</div>
<div class="total total_amount">
<span class="value"></span>
<!-- общая сумма sum > sum > sum -->
</div>
<div class="future_minus">
<!-- 17 000 -->
</div>
<div class="sum">
<label class="total">
<span class="value"></span><!-- общая сумма -->
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">3 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">5 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="total">
<span class="value"></span><!-- общая сумма sum > sum -->
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">4 000</span>
<input type="checkbox" checked="checked">
</label>
<div class="sum">
<label class="total">
<span class="value"></span><!-- общая сумма sum -->
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">1 500</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">7 500</span>
<input type="checkbox" checked="checked">
</label>
</div>
</div>
</div>
<script>
const historyPlus = document.querySelector(".history_plus");
const historyMinus = document.querySelector(".history_minus");
const futurePlus = document.querySelector(".future_plus");
const futureMinus = document.querySelector(".future_minus");
const totalAmount = document.querySelector(".total_amount");
const numHistoryMinus = Number(historyMinus.textContent.replace(/\s/g, ''));
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
const getValue = (elem) => {
if (elem.classList.contains('number')) {
return elem.querySelector('input').checked ?
+elem.querySelector('.value').textContent.replace(/\s/g, '') :
0
} else if (elem.classList.contains('sum')) {
sum(elem);
const total = elem.querySelector(':scope>.total');
return total.querySelector('input').checked ?
+total.querySelector('.value').textContent.replace(/\s/g, '') :
0
}
}
const sum = (elem) => {
const total = elem.querySelector('.total');
const sumElems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
const s = sumElems.reduce((a, el) => a + getValue(el), 0);
total.querySelector('.value').textContent = digits(s);
futureMinus.textContent = digits(numHistoryMinus - s);
}
const setCheckedSum = (elem, checked) => {
const total = elem.querySelector('.total');
const elems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
if (total) {
total.querySelector('input').checked = checked;
}
elems.forEach(el => {
if (el.classList.contains('number')) {
el.querySelector('input').checked = checked;
} else if (el.classList.contains('sum')) {
setCheckedSum(el, checked);
}
})
}
const testChecked = (elem) => {
if (elem.classList.contains('number'))
return elem.querySelector('input').checked;
const total = elem.querySelector('.total');
const elems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
const checked = elems.reduce((ch, el) => testChecked(el) || ch, false)
const input = total.querySelector('input');
if (input) input.checked = checked;
return checked;
}
const calculator = document.querySelector('.calculator');
sum(calculator);
calculator.addEventListener('change', ev => {
const {
target
} = ev;
const el = target.closest('.total');
if (el) {
const sum = el.closest('.sum');
setCheckedSum(sum, target.checked);
} else {
testChecked(calculator);
}
sum(calculator);
})
</script>
</body>
</html>
|
|
20.05.2023, 14:06
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,777
|
|
Ну сделать функцию
const substract = () => {
const result = Number(historyMinus.textContent.replace(/\s/g, '')) - Number(totalAmount.textContent.replace(/\s/g, ''));
futureMinus.textContent = digits(result);
}
И вызывать ее после строк 189 и200
Ну можно и так - впихнуть это в sum. |
|
20.05.2023, 18:06
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
voraa,
А как пофиксить вот этот
то есть когда 9 000 выбирается то итоговой сумме не видны изменения
Снять все галочки и нажать только на 9 000
https://postimg.cc/9R6HwvWF
почему то через img картинка не вставилась, прямая ссылка на картинку
Последний раз редактировалось Сергей Ракипов, 20.05.2023 в 18:09.
|
|
|
|
