Список задач. Почему поле ввода названия задачи и кнопка добавления задачи блокируются при длине списка равному 0?

Question

[Нуртилек Карабеков]

Сверстал простенький список задач. Все работает прекрасно кроме этого момента.
Использую обычный Javascript, HTML и CSS

<div class="todo-list">
      <!--List-->
      <ul class="list">
        
        <li class="list-item">
          <label class="label-wrap">
            <input class="checkbox" type="checkbox" />
            <span>Eat</span>
          </label>
          <div class="delete-btn">Delete</div>
        </li>

        <li class="list-item">
          <label class="label-wrap">
            <input class="checkbox" type="checkbox" />
            <span>Eat</span>
          </label>
          <div class="delete-btn">Delete</div>
        </li>
      </ul>
      <!--List-->

      <p class="no-tasks-message hidden">
        No tasks left
      </p>
      <input class="input" type="text" required />
      <input class="add-btn" type="button" value="Add" />
    </div>

    <!--Template-->
    <template id="task-template">
      <li class="list-item">
        <label class="label-wrap">
          <input class="checkbox" type="checkbox" />
          <span></span>
        </label>
        <div class="delete-btn">Delete</div>
      </li>
    </template>

    <script src="js/script.js"></script>

const toDoList = document.querySelector(".todo-list");
const list = document.querySelector(".list");
const items = list.children;
const emptyListMessage = document.querySelector(".no-tasks-message");
const addBtn = document.querySelector(".add-btn");
const input = document.querySelector(".input");
const taskTemplate = document.querySelector("#task-template").content;
const newItemTemplate = taskTemplate.querySelector(".list-item");

//вывод сообщения
const toggleEmptyListMessage = function () {
  if (items.length === 0) emptyListMessage.classList.remove("hidden");
};
// удаление элемента при нажатии на чекбокс или кнопку удаленич
const buttonHandler = function (item, buttonName, type) {
  let btn = item.querySelector(buttonName);
  btn.addEventListener(type, function () {
    item.remove();
    toggleEmptyListMessage();
  });
};
function toggleBtn () {
for (let i = 0; i < items.length; i++)
  buttonHandler(items[i], ".checkbox", "change");
for (let i = 0; i < items.length; i++)
  buttonHandler(items[i], ".delete-btn", "click");
}
toggleBtn();


// добавление нового элемента
addBtn.addEventListener('click', function() {
  let inputValue = document.querySelector('.input').value;
  let task = newItemTemplate.cloneNode(true);
  let taskDesc = task.querySelector('span');
  taskDesc.textContent = inputValue;
  buttonHandler(task, '.checkbox', 'change');
  buttonHandler(task, '.delete-btn', 'click' );

  list.appendChild(task);
  input.value = '';

  if (list.length === 0) input.setAttribute('readonly', 'false')
})

Comments

[Andrey Vasilev]

код

[Нуртилек Карабеков]

Andrey Vasilev, принято

[Andrey Vasilev]

Нуртилек Карабеков, так ведь всё работает?

[Andrey Vasilev]

Нуртилек Карабеков, вообще блокироваться могло бы из-за следующего кода:

if (list.length === 0) input.setAttribute('readonly', 'false')

но он неправильно описан

[Нуртилек Карабеков]

Andrey Vasilev, https://codepen.io/nurtilex/pen/ExKjpQd

[Нуртилек Карабеков]

Andrey Vasilev, я его удалил. Не получилось

[Andrey Vasilev]

Нуртилек Карабеков, после удаления последнего элемента отрабатывает buttonHandler, в нем отрабатывает toggleEmptyListMessage();, в котором в свою очередь существует условие:

if (items.length === 0) emptyListMessage.classList.remove("hidden");

, если уберешь его или изменишь, то все отлично будет работать и добавляться

[Нуртилек Карабеков]

Andrey Vasilev, убрал вызов toggleEmptyListMessage() в buttonHandler. Всё заработало, но теперь не понятно что делать с сообщением

[Andrey Vasilev]

Нуртилек Карабеков, я бы посоветовал тебе создать массив для пуша item. потом его проверять всегда и дописать условие.
к примеру сейчас есть проверка на то, что item === 0, но нет проверки на то, что item >= 1. то есть как запушишь, вызывай этот метод и попадешь на item >= 1 следовательно надпись можно убирать
если удаляешь последний элемент попадешь в item === 0 и запись можно показывать
плюс у тебя вот эти свойства перекрывают всю область и блокируют все элементы, поэтому add и input не работают

.no-tasks-message {
  display: flex;
  justify-content: center;
  width: 100%; /* <---- вот это */
  height: 100%; /* <---- и вот это */
  align-items: center;
  position: absolute;
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.623);
}

[Нуртилек Карабеков]

Andrey Vasilev, Спасибо огромное. Все заработало)

[Andrey Vasilev]

Нуртилек Карабеков, ))