Форум

рони · #21 (**permalink**) 19.05.2023, 11:07

Сергей Ракипов,
да другой код, другой подход. некий объект например, и отображать его "текущее дерево состояний"

Сергей Ракипов · #22 (**permalink**) 19.05.2023, 17:48

Вот такая структура будет нормальная, тут просто структура верстки.

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        body {
            font-size: 1.2rem;
            font-family: 'Courier New', Courier, monospace;
            font-weight: 900;
        }

        .calculator {
            max-width: 320px;
            margin: 0px auto 0px;
            display: flex;
            flex-direction: column;
        }

        .total_amount {
            max-width: 320px;
            margin: 20px auto 20px;
            color: #F288B4;
        }

        .level_one {
            color: #946FF2;
            padding: 10px 0px 10px 10px;
            margin: 0px 0px 20px 0px;
            border-left: solid 1px #946FF2;
        }

        .sum_all_level_one {
            display: block;
            padding: 0px 0px 2px 0px;
        }

        .num_level_one {}

        .level_two {
            color: #F47B5E;
            display: flex;
            flex-direction: column;
            padding: 0px 0px 0px 10px;
            border-left: solid 1px #F47B5E;
        }

        .num_level_two {}

        .level_three {
            color: #F2C463;
            display: flex;
            flex-direction: column;
            padding: 0px 0px 0px 10px;
            border-left: solid 1px #F2C463;
        }
    </style>
</head>

<body>

    <div class="total_amount">
        16 000
    </div>
    <div class="calculator">

        <div class="level_one">

            <label class="sum_all_level_one">
                <span class="num_level_one">
                    8 000
                </span>
                <input type="checkbox" checked="checked" class="checkbox level__1">
            </label>

            <div class="level_two">

                <label class="number">
                    <span class="num_level_two">
                        4 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

                <label class="number">
                    <span class="num_level_two">
                        4 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

            </div>

        </div>
        <div class="level_one">

            <label class="sum_all_level_one">
                <span class="num_level_one">
                    8 000
                </span>
                <input type="checkbox" checked="checked" class="checkbox level__1">
            </label>

            <div class="level_two">

                <label class="number">
                    <span class="num_level_two">
                        2 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

            </div>

            <div class="level_two">

                <label class="number">
                    <span class="num_level_two sum_all_level_two">
                        6 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

                <div class="level_three">

                    <label class="number">
                        <span class="num_level_two">
                            3 000
                        </span>
                        <input type="checkbox" checked="checked" class="checkbox level__3">
                    </label>

                    <label class="number">
                        <span class="num_level_two">
                            3 000
                        </span>
                        <input type="checkbox" checked="checked" class="checkbox  level__3">
                    </label>

                </div>

            </div>

        </div>
    </div>
    <script>
        const calculator = document.querySelector('.calculator');
        const levelOne = document.querySelector('.level_one');
  
 
        calculator.addEventListener('change', function ({
            target
        }) {
            console.log(target);  
            console.log(target.className);

            if(target.classList.contains("level__1")){

                console.log("Клик level_one");

                let levelOneChildren = target.querySelectorAll(".level_two")
                // let levelOneChildren = levelOne.childNodes
                // let levelOneChildren = levelOne.children
                console.log(levelOneChildren)
            }

        })
    </script>
</body>

</html>

Сергей Ракипов · #23 (**permalink**) 19.05.2023, 17:59

И как при клике на чекбокс вывести имена детей

рони · #24 (**permalink**) 19.05.2023, 21:06

Сергей Ракипов,

let levelOneChildren = target.closest('.level_one').querySelectorAll(".level_two")

Сергей Ракипов · #25 (**permalink**) 20.05.2023, 06:17

рони,
А почему так?

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        body {   
            background-color: #27405C;      
            font-size: 15px;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
        }
        label{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .calculator {
            max-width: 110px;
            margin: 0px auto 0px;
            display: flex;
            flex-direction: column;
        }

        .total_amount {
            max-width: 220px;
            margin: 20px auto 20px;
            color: #946FF2;
        }

        .level_one {
            color: #2189FF;
            padding: 10px 0px 10px 10px;
            margin: 0px 0px 10px 0px;
            border-left: solid 1px #2189FF;
        }

        .sum_all_level_one {

            padding: 0px 0px 2px 0px;
        }

        .num_level_one {}

        .level_two {
            color: #1D76DB;
            display: flex;
            flex-direction: column;
            padding: 0px 0px 0px 10px;
            border-left: solid 1px #1D76DB;
        }

        .num_level_two {}

        .level_three {
            color: #619DE1;
            display: flex;
            flex-direction: column;
            padding: 0px 0px 0px 10px;
            border-left: solid 1px #619DE1;
        }
    </style>
</head>

<body>

    <div class="total_amount">
        21 000
    </div>
    <div class="calculator">

        <div class="level_one">

            <label class="sum_all_level_one">
                <span class="num_level_one">
                    8 000
                </span>
                <input type="checkbox" checked="checked" class="checkbox level__1">
            </label>

            <div class="level_two">

                <label class="number">
                    <span class="num_level_two">
                        3 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

                <label class="number">
                    <span class="num_level_two">
                        5 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

            </div>

        </div>
        <div class="level_one">

            <label class="sum_all_level_one">
                <span class="num_level_one">
                    13 000
                </span>
                <input type="checkbox" checked="checked" class="checkbox level__1">
            </label>

            <div class="level_two">

                <label class="number">
                    <span class="num_level_two">
                        4 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

            </div>

            <div class="level_two">

                <label class="number">
                    <span class="num_level_two sum_all_level_two">
                        9 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

                <div class="level_three">

                    <label class="number">
                        <span class="num_level_two">
                            1 500
                        </span>
                        <input type="checkbox" checked="checked" class="checkbox level__3">
                    </label>

                    <label class="number">
                        <span class="num_level_two">
                            7 500
                        </span>
                        <input type="checkbox" checked="checked" class="checkbox  level__3">
                    </label>

                </div>

            </div>

        </div>
    </div>
    <script>

        const calculator = document.querySelector('.calculator');
        const levelOne = document.querySelector('.level_one');
  
 
        calculator.addEventListener('change', function ({
            target
        }) { 
            console.log(target.className);

            if(target.classList.contains("level__1")){

            console.log("Click: level_1");

            let levelOneChildren = target.closest('.level_one').querySelectorAll(".level_two label.number")

            // let levelOneChildren = levelOne.childNodes
            // let levelOneChildren = levelOne.children
            console.log(levelOneChildren);
        }

            if(target.classList.contains("level__2")){

                console.log("Click: level_2");

                let levelTwoChildren = target.closest('.level_two').querySelectorAll(".level_three label.number")

                // let levelOneChildren = levelOne.childNodes
                // let levelOneChildren = levelOne.children
                console.log(levelTwoChildren);
        }
        
        })

    </script>
</body>

</html>

При клике level__1 где 13 000 я получаю 4 детей а по идее мне нужно 2 детей level_two label.number где 4 000 и 9 000 а по итогу получаю 4 детей где 4 000 9 000 1 500 7 500

voraa · #26 (**permalink**) 20.05.2023, 08:43

Потому, что querySelectorAll получает не детей, а всех потомков, которые вложены в элемент.

Сергей Ракипов · #27 (**permalink**) 20.05.2023, 08:46

Сообщение от voraa

Потому, что querySelectorAll получает не детей, а всех потомков, которые вложены в элемент.

А как детей получить?

рони · #28 (**permalink**) 20.05.2023, 09:28

Сергей Ракипов,
идти по кратчайшему к нужным элементам!
let levelOneChildren = target.closest('.level_one').querySelectorAll(".le vel_two > label.number")

Сергей Ракипов · #29 (**permalink**) 20.05.2023, 09:33

Сообщение от рони

Сергей Ракипов,
идти по кратчайшему к нужным элементам!
let levelOneChildren = target.closest('.level_one').querySelectorAll(".le vel_two > label.number")

Ну я почти так и сделал

Сергей Ракипов · #30 (**permalink**) 20.05.2023, 09:34

Вот отмечание чек боксов работает так как нужно, но там ошибка и я ее не понимаю

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        body {   
            background-color: #27405C;      
            font-size: 15px;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
        }
        label{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .calculator {
            max-width: 110px;
            margin: 0px auto 0px;
            display: flex;
            flex-direction: column;
        }

        .total_amount {
            max-width: 220px;
            margin: 20px auto 20px;
            color: #946FF2;
        }

        .level_one {
            color: #2189FF;
            padding: 10px 0px 10px 10px;
            margin: 0px 0px 10px 0px;
            border-left: solid 1px #2189FF;
        }

        .sum_all_level_one {

            padding: 0px 0px 2px 0px;
        }

        .num_level_one {}

        .level_two {
            color: #1D76DB;
            display: flex;
            flex-direction: column;
            padding: 0px 0px 0px 10px;
            border-left: solid 1px #1D76DB;
        }

        .num_level_two {}

        .level_three {
            color: #619DE1;
            display: flex;
            flex-direction: column;
            padding: 0px 0px 0px 10px;
            border-left: solid 1px #619DE1;
        }
    </style>
</head>

<body>

    <div class="total_amount">
        21 000
    </div>
    <div class="calculator">

        <div class="level_one">

            <label class="all__1 sum_all_level_one">
                <span class="num_level_one">
                    8 000
                </span>
                <input type="checkbox" checked="checked" class="checkbox level__1">
            </label>

            <div class="level_two">

                <label class="number">
                    <span class="num_level_two">
                        3 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

                <label class="number">
                    <span class="num_level_two">
                        5 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

            </div>

        </div>
        <div class="level_one">

            <label class="all__1 sum_all_level_one">
                <span class="num_level_one">
                    13 000
                </span>
                <input type="checkbox" checked="checked" class="checkbox level__1">
            </label>

            <div class="level_two">

                <label class="number">
                    <span class="num_level_two">
                        4 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

            </div>

            <div class="level_two">

                <label class="all__2 number">
                    <span class="num_level_two sum_all_level_two">
                        9 000
                    </span>
                    <input type="checkbox" checked="checked" class="checkbox level__2">
                </label>

                <div class="level_three">

                    <label class="number">
                        <span class="num_level_three">
                            1 500
                        </span>
                        <input type="checkbox" checked="checked" class="checkbox level__3">
                    </label>

                    <label class="number">
                        <span class="num_level_three">
                            7 500
                        </span>
                        <input type="checkbox" checked="checked" class="checkbox  level__3">
                    </label>

                </div>

            </div>

        </div>
    </div>

    <script>
     
        const totalAmount = document.querySelector('.total_amount');
        const calculator = document.querySelector('.calculator');
        const levelOne = document.querySelector('.level_one');
        const levelTwo = document.querySelector('.level_two');
        const levelThree = document.querySelector('.level_three');
  
        calculator.addEventListener('change', function ({
            target
        }) { 

            let input = target.closest('input');

            console.log(input)

            if (input) {

                let all__1 = target.closest('.all__1 input');

                if (all__1) target.closest('.level_one').querySelectorAll('.number input').forEach(input => (input.checked = all__1.checked));

                else if (target.checked) target.closest('.level_one').querySelector('.all__1 input').checked = true;

                else target.closest('.level_one').querySelector('.all__1 input').checked = target.closest('.level_one').querySelectorAll('.number :checked');

            }

            if (input) {

                let all__2 = target.closest('.all__2 input');

                if (all__2) target.closest('.level_two').querySelectorAll('.number input').forEach(input => (input.checked = all__2.checked));

                else if (target.checked) target.closest('.level_two').querySelector('.all__2 input').checked = true;

                else target.closest('.level_two').querySelector('.all__2 input').checked = target.closest('.level_two').querySelectorAll('.number :checked');

            }

            if(target.classList.contains("level__1")){

            console.log("Click: level_1");

            let levelOneChildren = target.closest('.level_one').querySelectorAll(".level_two .num_level_two")

            console.log(levelOneChildren);
        }

            if(target.classList.contains("level__2")){

                console.log("Click: level_2");

                let levelTwoChildren = target.closest('.level_two').querySelectorAll(".level_three .num_level_three")

                console.log(levelTwoChildren);
        }
        
        })

    </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript