Javascript kodunda çalışmayan kod sorunu

const todos = [];

// DOM elements
const addForm = document.getElementById('add-form');
const todoNameInput = document.getElementById('todoName');
const todoList = document.getElementById('list-todo');
const deleteAllButton = document.querySelector('.btn-delete');
const filterInput = document.getElementById('filter');

// Form gönderildiğinde yeni bir görev ekle
addForm.addEventListener('submit', function (e) {
  e.preventDefault();
  const todoText = todoNameInput.value.trim();

  if (todoText !== '') {
    todos.push(todoText);
    displayTodos();
    todoNameInput.value = '';
  } else {
    alert("Lütfen geçerli bir todo giriniz!")
  }
});

// Görevleri listeleme
function displayTodos() {
  todoList.innerHTML = '';
  todos.forEach(function (todo, index) {
    const todoItem = document.createElement('li');
    todoItem.innerHTML = `
      <span>${todo}</span>
      <button class="btn only-delete" data-index="${index}">X</button>
    `;
    todoList.appendChild(todoItem);
  });
}

// Todoları silme butonlarına tıklandığında sil
todoList.addEventListener('click', function (e) {
  if (e.target.classList.contains('only-delete')) {
    const index = e.target.getAttribute('data-index');
    todos.splice(index, 1);
    displayTodos();
  }
});


// Delete All butonuna tıkladığınızda tüm görevleri sil
deleteAllButton.addEventListener('click', function () {
    if (todos.length !== 0 || todos.length !== "") {
        todos.length = 0;
        displayTodos();
    } else {
        alert("Lütfen bir todos giriniz!")
    }
  });


// Input değiştiğinde todo'ları filtrele
filterInput.addEventListener('input', function () {
  const filterText = filterInput.value.trim().toLowerCase();
  const filteredTodos = todos.filter(function (todo) {
    return todo.toLowerCase().includes(filterText);
  });
  displayTodos(filteredTodos);
});

// Filtrelenmiş todo'ları göster
function displayTodos(filteredTodos = todos) {
  todoList.innerHTML = '';
  filteredTodos.forEach(function (todo, index) {
    const todoItem = document.createElement('li');
    todoItem.innerHTML = `
      <span>${todo}</span>
      <button class="btn only-delete" data-index="${index}">X</button>
    `;
    todoList.appendChild(todoItem);
  });
}
displayTodos();

Gördüğünüz kodda deleteAllButton tuşu siliyor ama todolar yokken basınca basit bir alert hatası vermesini istiyorum. her türlü kodu denedim heralde hata başka bir yerde ben göremedim, sorunu bulmamda yardımcı olabilir misiniz?

Oncelikle, HTML olmadan kod calismiyor. Soyle bir yere koyup paylasabilirsiniz.

Bu her zaman true.

1 Beğeni