Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 20.05.2023, 11:15
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

<!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>
Ответить с цитированием
  #32 (permalink)  
Старый 20.05.2023, 12:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

voraa,
Ответить с цитированием
  #33 (permalink)  
Старый 20.05.2023, 12:09
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

voraa,
я же правильно понял что она работает по принципу
<!-- общая сумма sum > sum > sum -->
Ответить с цитированием
  #34 (permalink)  
Старый 20.05.2023, 13:03
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Я тут не много дописал код и у меня вопрос

<!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 сразу же отображался при загрузки старинцы, а не ждал пока кликнут на чекбокс
Ответить с цитированием
  #35 (permalink)  
Старый 20.05.2023, 13:48
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Я не могу что то делать и обдумывать, когда задача ставится по кускам.
Только начинаешь понимать и придумываешь алгоритм, как оказывается надо еще что то, к чему данный алгоритм не очень подходит.
Да и постановку задачи надо излагать четче.
Я так и не понял, что должно быть в futureMinus

Я просто на данном примере показал, как с помощью querySelectorAll искать непосредственно детей (через :scope>)
И то что для данной задачи, где одинаковые блоки информации вложены друг в друга нужна рекурсия.

Последний раз редактировалось voraa, 20.05.2023 в 13:51.
Ответить с цитированием
  #36 (permalink)  
Старый 20.05.2023, 13:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

voraa,
есть некая базовое число -- вычисленные суммы должны вычитаться из этого числа.
Ответить с цитированием
  #37 (permalink)  
Старый 20.05.2023, 14:00
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Сообщение от рони
вычисленные суммы должны вычитаться из этого числа.
суммы или сумма?
Ответить с цитированием
  #38 (permalink)  
Старый 20.05.2023, 14:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

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>
Ответить с цитированием
  #39 (permalink)  
Старый 20.05.2023, 14:06
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Ну сделать функцию
const substract = () => {
const result = Number(historyMinus.textContent.replace(/\s/g, '')) - Number(totalAmount.textContent.replace(/\s/g, ''));
 
            futureMinus.textContent = digits(result);
}

И вызывать ее после строк 189 и200

Ну можно и так - впихнуть это в sum.
Ответить с цитированием
  #40 (permalink)  
Старый 20.05.2023, 18:06
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

voraa,
А как пофиксить вот этот



то есть когда 9 000 выбирается то итоговой сумме не видны изменения
Снять все галочки и нажать только на 9 000

https://postimg.cc/9R6HwvWF



почему то через img картинка не вставилась, прямая ссылка на картинку

Последний раз редактировалось Сергей Ракипов, 20.05.2023 в 18:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как совместить данные php с js? deman1 Javascript под браузер 4 29.08.2021 20:39
js математика Rezorwar Общие вопросы Javascript 1 01.12.2020 14:19
Ищу JS разработчиков в лесу Kenjuy27 Работа 0 18.07.2018 09:06
Диалог между HTML и внешним JS в контексте расширения GoogleChrome ev1lart Events/DOM/Window 0 26.04.2017 19:25
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28