JavaScript Todo-App Todo'lar ekrana yanlış yazılması

Kxaan dedi:

JavaScript:Panoya kopyala

const todoArray = []
let trashFunc = () => {
 Array.from(document.querySelectorAll(".trash")).forEach(element => {
 element.addEventListener("click", (e) => {
 let parent = e.target.parentElement
 let firstChildContent = parent.firstElementChild.textContent
 let index = todoArray.indexOf(firstChildContent)
 todoArray.splice(index, 1)
 parent.remove()
 console.log(todoArray);
 trashFunc()
 })
 });
}

Bu kısımda değişiklik yaptım sadece. Sorunsuz çalışıyor olması lazım.

Genişletmek için tıkla...

Kxaan dedi:

JavaScript:Panoya kopyala

const todoArray = []
let trashFunc = () => {
 Array.from(document.querySelectorAll(".trash")).forEach(element => {
 element.addEventListener("click", (e) => {
 let parent = e.target.parentElement
 let firstChildContent = parent.firstElementChild.textContent
 let index = todoArray.indexOf(firstChildContent)
 todoArray.splice(index, 1)
 parent.remove()
 console.log(todoArray);
 trashFunc()
 })
 });
}

Bu kısımda değişiklik yaptım sadece. Sorunsuz çalışıyor olması lazım.

Genişletmek için tıkla...

ErrorCorrection dedi:

Hocam şu an deneyemem ama yarın deneyip sonucu atarım.
Bir de hocam yazdığım kod çok mu acemice olmuş?
Tavsiyeleriniz var mı?



Hocam denedim ama yine hata var.
Hata şu mesela 3 tane todo girdim. Sadece 1 tanesini silip sonra bir tane todo ekleyince 1 tane silmiş olmamam rağmen hepsi siliniyor.

@Kxaan

Genişletmek için tıkla...

Kxaan dedi:

Hocam kod bana çok karışık geldi. İnternetteki örneklere bakarak tekrar yazmayı denemenizi öneriyorum. Öğrenmek için yaptığınızı bildiğimden tüm kodu silip baştan yazmak istemedim.

Genişletmek için tıkla...

RaSGooL dedi:

Fonksiyonların çağırma sırası birbirine girmiş. Öncelikle tıraşhFunc da neden tekrar tıraşhFunc çalışıyor? Asıl sorun bu değil, asıl sorun yaratan kısım; Add fonksiyonunda. Bu fonksiyonda array içerisinde tıraşhFunc fonksiyonunu çalıştırıyorsun. Ama bunu her eleman için yapıyorsun. Atladığın kısım ise zaten tıraşhFunc fonksiyonu tüm elemanlara Event eklemek için tasarlanmış. Yani nested Event verme yapıyorsun. Bu demektir ki; eğer n tane elemanın varsa 1. elemanda n tane Event eklemiş oldun. Bunu engellemek için Add fonksiyonunda tıraşhFunc fonksiyonunu forEach bloğundan sonra çağır. Sorunun giderilmiş olacak.

Ayrıca bazı durumlarda delete etsen dahi delete butonu siliniyor. Komple div silinmiyor.

Kod genel olarak çorba. Biraz daha geliştirme yapman lazım. Mesela neden bir todo elemanı eklemek için daha önceki tüm elemanları siliyorsun?
Bir diğer problem ise şu; ben bu kodda silme butonunu farklı şekilde tasarlamak istediğimde veya "del" tuşuna basıldığında silinmesini istersem kodda değişiklik yapmak zorunda kalacağım ve hatta belki kendini tekrar bile etmiş olacaksın.
Bunu engellemek için fonksiyonları iyi düşünmek gerek. Ben olsam silme için şöyle yapardım; function trash(id)
ID değeri de HTML de ID değerine denk getirirdim. Mesela <div ID="todo-1"> gibi. Silme yaparken ID bul remove et geç.
Add içinse; function add(title) gibi bir şey yaparsın tamamdır. Todos dizisine eklerken ID ve title değerlerine sahip bir obje atamanı tavsiye ederim. Ve hatta silme işlemi içinde isDeleted gibi bir alanda tutabilirsin. Ve hatta tamamlanmışsa isDone gibi bir değerde tutabilirsin. Bunu şimdiden tasarlarsan ileride atıyorum bir backend olduğunda kodda neredeyse bir değişiklik yapmadan direkt bağlayabilirsin.

Genişletmek için tıkla...