Форум

NovichokJS · #1 (**permalink**) 10.07.2022, 13:48

У меня есть список ul с чекбоксами в каждом li.

<ul class="list">
<li class="list__item"><input type="checkbox" class="list__item-checkbox">Buy milk</li>
<li class="list__item"><input type="checkbox" class="list__item-checkbox">Pick up Tom from airport</li>
<li class="list__item"><input type="checkbox" class="list__item-checkbox">Visit party</li>
</ul>

Мне нужно изменить поведения каждого li элемента при клике на соответствующий чекбокс. Делаю таким образом и у меня добавляется класс 'list__item_done' только к первому элементу li. При клике на другие чекбоксы класс 'list__item_done' не назначается. Как это исправить?

const chbx = document.querySelector('.list__item-checkbox');
const li = document.querySelector('.list__item');

chbx.addEventListener('click', () => {
  if (chbx.checked) {
    li.classList.add('list__item_done');
  } else {
    li.classList.remove('list__item_done');
  }
});

рони · #2 (**permalink**) 10.07.2022, 13:59

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

Как это исправить?

прочитать ответы на предыдущую тему или сделать цикл по всем li

NovichokJS · #3 (**permalink**) 10.07.2022, 14:10

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

прочитать ответы на предыдущую тему или сделать цикл по всем li

const chbx = document.querySelector('.list__item-checkbox');
const li = document.querySelectorAll('.list__item');

chbx.addEventListener('click', () => {
  for (let i = 0; i < li.length; i++) {
    if (chbx.checked) {
      li.classList.add('list__item_done');
    } else {
      li.classList.remove('list__item_done');
    }
  }
});

Ошибка: cannot reat property undefined (reading 'add')

рони · #4 (**permalink**) 10.07.2022, 14:16

NovichokJS,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        ul {
            list-style: none;
            width: 240px;
        }

        .list__item_done {
            background-image: -webkit-linear-gradient(left, #0000CD, #FF0000);
            background-image: linear-gradient(to right, #0000CD, #FF0000);
            color: #FFFFFF;
        }
    </style>
    <script>
        /* делегирование */
        document.addEventListener("DOMContentLoaded", function() {
            let ul = document.querySelector(".list");
            ul.addEventListener("change", function({
                target
            }) {
                target.closest("li").classList.toggle("list__item_done", target.checked)
            })
        })
        /* цикл */
       /* document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll(".list li").forEach(li =>
            li.addEventListener("change", function({
                target
            }) {
                li.classList.toggle("list__item_done", target.checked)
            }))
        })*/
    </script>
</head>

<body>
    <ul class="list">
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Buy milk</li>
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Pick up Tom from airport</li>
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Visit party</li>
    </ul>
</body>

</html>

рони · #5 (**permalink**) 10.07.2022, 14:21

NovichokJS,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        ul {
            list-style: none;
            width: 240px;
        }

        .list__item_done {
            background-image: -webkit-linear-gradient(left, #0000CD, #FF0000);
            background-image: linear-gradient(to right, #0000CD, #FF0000);
            color: #FFFFFF;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const chbx = document.querySelector('.list');
            const lis = chbx.querySelectorAll('.list__item');

            chbx.addEventListener('click', () => {
                for (let i = 0; i < lis.length; i++) {
                    let li = lis[i];
                    if (li.querySelector(":checked")) {
                        li.classList.add('list__item_done');
                    } else {
                        li.classList.remove('list__item_done');
                    }
                }
            });

        })
    </script>
</head>

<body>
    <ul class="list">
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Buy milk</li>
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Pick up Tom from airport</li>
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Visit party</li>
    </ul>
</body>

</html>

рони · #6 (**permalink**) 10.07.2022, 14:24

NovichokJS,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        ul {
            list-style: none;
            width: 240px;
        }
        .list__item_done {
            background-image: -webkit-linear-gradient(left, #0000CD, #FF0000);
            background-image: linear-gradient(to right, #0000CD, #FF0000);
            color: #FFFFFF;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const chbx = document.querySelector('.list');
            const lis = chbx.querySelectorAll('.list__item');
            for (let li of lis) {
                li.addEventListener('click', () => {
                    if (li.querySelector(":checked")) {
                        li.classList.add('list__item_done');
                    } else {
                        li.classList.remove('list__item_done');
                    }
                })
            };
        })
    </script>
</head>
<body>
    <ul class="list">
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Buy milk</li>
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Pick up Tom from airport</li>
        <li class="list__item"><input type="checkbox" class="list__item-checkbox">Visit party</li>
    </ul>
</body>
</html>

NovichokJS · #7 (**permalink**) 10.07.2022, 14:38

Рони, спасибо. А эта обёртка обязательна в данном случае? - document.addEventListener("DOMContentLoaded", function() {
такого даже не учил еще. Без нее также отработает код

рони · #8 (**permalink**) 10.07.2022, 14:54

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

А эта обёртка обязательна в данном случае?

скрипт можно вставить в любое место страницы, без DOMContentLoaded только после элементов с которыми скрипт работает.

NovichokJS · #9 (**permalink**) 10.07.2022, 14:59

ясно. А как отсортировать выполненные(перечеркнутые таски)? чтобы те, которые чекаем спускались в самый вниз. Понимаю что надо наверное как-то сортануть массив lis, вызвав метод sort(), но как именно что и куда вставить не получается у меня

рони · #10 (**permalink**) 10.07.2022, 15:03

NovichokJS,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        alert(document.body ? "тело страницы создано" : "тело страницы отсутствует");
    </script>
</head>

<body>
    <script>
        alert(document.body ? "тело страницы создано" : "тело страницы отсутствует");
    </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript