Javascript-форум - Изменение поведения выбранных чекбоксов

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Изменение поведения выбранных чекбоксов (https://javascript.ru/forum/misc/84220-izmenenie-povedeniya-vybrannykh-chekboksov.html)

Цитата:

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

которые чекаем спускались в самый вниз.

append and prepend

Цитата:

Сообщение от рони (Сообщение 546577)

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>

это что?)

Цитата:

Сообщение от рони (Сообщение 546578)

append and prepend

спасибо, понял ulElement.append(li);

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 ul = document.querySelector('.list');
            const lis = Array.from(ul.querySelectorAll('.list__item'));
            ul.addEventListener('click', () => {
                ul.append(...lis);
                for (let li of lis) {
                    if (li.querySelector(":checked")) {
                        li.classList.add("list__item_done");
                        ul.append(li)
                    } 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>

:write: :lol:

<!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 ul = document.querySelector('.list');
            const lis = Array.from(ul.querySelectorAll('.list__item'));
            ul.addEventListener('click', () => {
                const before = [], after = [];
                for (let li of lis) {
                    if (li.querySelector(":checked")) {
                        li.classList.add("list__item_done");
                        after.push(li)
                    } else {
                        li.classList.remove("list__item_done");
                        before.push(li)
                    }
                };

                ul.append(...before, ...after)
            });
        })
    </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

это что?)

это была демонстрация, что если бы скрипт работал с document.body, то находясь выше document.body скрипт выдал бы ошибку.

Цитата:

Сообщение от рони (Сообщение 546583)

это была демонстрация, что если бы скрипт работал с document.body, то находясь выше document.body скрипт выдал бы ошибку.

да, да, понятно)

еще такой вот момент))

я написал костыль выше в коде у себя.
Ну собственно сам массив задач:

const tasks = [
  { text: 'Buy milk', done: false },
  { text: 'Pick up Tom from airport', done: false },
  { text: 'Visit party', done: false },
  { text: 'Visit doctor', done: true },
  { text: 'Buy meat', done: true },
];

И костыль, с помощью которого добавляю таски:

const handlerButton = () => {
  const getTask = document.querySelector('.task-input');
  if (getTask.value !== '') {
    tasks.push({ text: getTask.value, done: false });

    const getListElem = document.querySelector('.list');

    const getListItemElem = document.createElement('li');
    getListItemElem.classList.add('list__item');
    getListItemElem.innerText = getTask.value;

    const getCheckboxElem = document.createElement('input');
    getCheckboxElem.setAttribute('type', 'checkbox');
    getCheckboxElem.classList.add('list__item-checkbox');

    getListElem.prepend(getListItemElem);
    getListItemElem.prepend(getCheckboxElem);
    getTask.value = '';
  }
};

clickButton.addEventListener('click', handlerButton);

clickButton.addEventListener('click', handlerButton);

const ulElement = document.querySelector('.list');
const lis = ulElement.querySelectorAll('.list__item');

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

Оно работает, но не полностью. Мне надо чтобы добавленные таски также при отметке чекбокса спускались вниз. Сейчас они не добавляют класс list__item_done и не спускаются у меня.

Собственно, как и куда привязать блоки кода чтобы работало опускание отмеченных чекбоксом тасков вниз?

Цитата:

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

Собственно, как и куда привязать блоки кода чтобы работало опускание отмеченных чекбоксом тасков вниз?

код выше #15

Цитата:

Сообщение от рони (Сообщение 546587)

код выше #15

работает немного криво. Если несколько кликов сделать на чекбок, только тогда отмечает его, подчеркивает текст и опускает вниз таски. Вот итоговый:

const tasks = [
  { text: 'Buy milk', done: false },
  { text: 'Pick up Tom from airport', done: false },
  { text: 'Visit party', done: false },
  { text: 'Visit doctor', done: true },
  { text: 'Buy meat', done: true },
];

const listElem = document.querySelector('.list');
const clickButton = document.querySelector('.create-task-btn');

const handlerButton = () => {
  const getTask = document.querySelector('.task-input');
  if (getTask.value !== '') {
    tasks.push({ text: getTask.value, done: false });

    console.log(tasks);

    const getListItemElem = document.createElement('li');
    getListItemElem.classList.add('list__item');
    getListItemElem.innerText = getTask.value;

    const getCheckboxElem = document.createElement('input');
    getCheckboxElem.setAttribute('type', 'checkbox');
    getCheckboxElem.classList.add('list__item-checkbox');

    listElem.prepend(getListItemElem);
    getListItemElem.prepend(getCheckboxElem);
    getTask.value = '';
  }
};

clickButton.addEventListener('click', handlerButton);

const handlerChexbox = () => {
  const lis = Array.from(listElem.querySelectorAll('.list__item'));
  listElem.addEventListener('click', () => {
    const before = [],
      after = [];
    for (let li of lis) {
      if (li.querySelector(':checked')) {
        li.classList.add('list__item_done');
        after.push(li);
      } else {
        li.classList.remove('list__item_done');
        before.push(li);
      }
    }

    listElem.append(...before, ...after);
  });
};
listElem.addEventListener('click', handlerChexbox);