@nurtilex
Начинающий front-end разработчик.

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

Сверстал простенький список задач. Все работает прекрасно кроме этого момента.
Использую обычный 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')
})
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы