مشلكة في مشروع to do list زر الانتهاء و الحذف لا يعمل

بتاريخ 29 دقائق مضت قال Mohammmed Mahmoud:

برجاء ارسال الكود كامل عشان افهم

شيفرة جافاسكربت للحل المذكور كاملة:

let task_title = document.getElementById("txt");
let submit_btn = document.getElementById("submit_todo");
let availabel = document.querySelector(".availabel");

submit_btn.onclick = function (e) {
  e.preventDefault();

  if (task_title.value != "") {
    let ul = document.getElementById("ul");

    let li = document.createElement("li");
    li.classList.add("singil_task");

    let p = document.createElement("p");
    p.textContent = task_title.value;

    let div_icons = document.createElement("div");
    div_icons.classList.add("icons");

    div_icons.innerHTML = `
<i class="fa-circle-check fa-sharp fa-solid "></i>
<i class="fa-circle-xmark fa-solid" style="padding-left: 15px;"></i>
`;

    li.appendChild(p);
    li.appendChild(div_icons);
    ul.appendChild(li);
    task_title.value = "";

    let cheak = li.querySelector(".fa-circle-check");
    cheak.addEventListener("click", function () {
      li.classList.add("done");
    });
    let deleteBtn = li.querySelector(".fa-circle-xmark");
    deleteBtn.addEventListener("click", function () {
      li.remove();
    });
  } else {
    let h5 = document.createElement("h5");
    h5.textContent = "please enter a task";
    h5.style.color = "red";
    h5.style.display = "block";
    h5.style.padding = "10px";

    availabel.appendChild(h5);
    setTimeout((_) => {
      h5.remove();
    }, 1000);
  }
};

المشكلة لديك أنك تحاول الاستعلام عن زر انتهاء المهمة عند تحميل الصفحة مباشرة، وذلك غير ممكن لأن المهمة لم تٌضاف بعد، الحل يكون بإنشاء عنصر li داخل حدث الاضافة وليس خارجه، والاستعلام عن زر انهاء المهمة بعد ذلك مباشرة، ثم ربط الحدث click وليس onclick به لتنفيذ عملية الانهاء كالتالي:

submit_btn.onclick = function (e) {
  let li = document.createElement("li"); // انشاء عنصر المهمة
  ...

  let cheak = li.querySelector(".fa-circle-check"); // الاستعلام عن الأزرار
  cheak.addEventListener("click", ..); // ربط حدث ضغط الزر
  
  // بنفس الطريقة لزر الحذف
  // ..
}

بتاريخ 37 دقائق مضت قال Hassan Hedr:

المشكلة لديك أنك تحاول الاستعلام عن زر انتهاء المهمة عند تحميل الصفحة مباشرة، وذلك غير ممكن لأن المهمة لم تٌضاف بعد، الحل يكون بإنشاء عنصر li داخل حدث الاضافة وليس خارجه، والاستعلام عن زر انهاء المهمة بعد ذلك مباشرة، ثم ربط الحدث click وليس onclick به لتنفيذ عملية الانهاء كالتالي:

submit_btn.onclick = function (e) {
  let li = document.createElement("li"); // انشاء عنصر المهمة
  ...

  let cheak = li.querySelector(".fa-circle-check"); // الاستعلام عن الأزرار
  cheak.addEventListener("click", ..); // ربط حدث ضغط الزر
  
  // بنفس الطريقة لزر الحذف
  // ..
}

 

لم افهم و انا المشكله عندي كيف احدد العنصر عشان احذفه 

بتاريخ منذ ساعة مضت قال Mohammmed Mahmoud:

لم افهم و انا المشكله عندي كيف احدد العنصر عشان احذفه 

كما ذكرت لك بنفس طريقة برمجة وظيفة زر انهاء المهمة، يجب تحديد زر الحذف وإضافة معالج للحدث click له، بداخله يمكنك حذف عنصر li للمهمة كالتالي:

submit_btn.onclick = function (e) {
  let li = document.createElement("li"); // انشاء عنصر المهمة
  // ..
  let deleteBtn = li.querySelector(".fa-circle-xmark"); // تحديد زر الحذف
  deleteBtn.addEventListener("click", function () {
    li.remove(); // حذف عنصر المهمة 
  });
  //..
}

إذا فتحت الكونسول بعد فتح الصفحة ستجد خطأ مفاده أنك تحاول الإنصات addEventListener الى عنصر غير موجود تسميه في الكود الخاص بك بمتغير cheak وهذا لأنك تحاول الوصول الى هذا العنصر مبكراً قبل أن يوجد أصلا لأنك تقوم بإنشاء عناصر li من خلال إضافتها بالإستعانة بجافاسكريت وليس قبل أن يتم تحميل الصفحة. لحل المشكلة قم بإجراء التعديلات التالية على الكود الخاص بك وستعمل لديك خاصية الحذف وأيضا إكمال المهمات.

// إحذف هذا الجزء من الكود لأنه لايعمل
// cheak.addEventListener("onclick" , function(){
//     li.classList.add("done");
// })
...
//بكامل محتوياته كما نقوم بإضافة الصنف الذي يعمل تنسيق معين يظهر لنا العنصر قد تم إنهاءه. إذا لم تنشئ هذا الصنف بعد يمكنك إنشاءه li قم بتعديل هذا الجزء ليصبح الكود فعالاً حيث تلاحظ أننا نحذف العنصر
// i هنا نربط الحذف والإكمال بالنقر على العنصر 
<i onclick="li.classList.add('done');" class="fa-circle-check fa-sharp fa-solid "></i>
<i onclick="li.remove()" class="fa-circle-xmark fa-solid" style="padding-left: 15px;"></i>
...
	

بتاريخ 30 دقائق مضت قال علي محسن:

إذا فتحت الكونسول بعد فتح الصفحة ستجد خطأ مفاده أنك تحاول الإنصات addEventListener الى عنصر غير موجود تسميه في الكود الخاص بك بمتغير cheak وهذا لأنك تحاول الوصول الى هذا العنصر مبكراً قبل أن يوجد أصلا لأنك تقوم بإنشاء عناصر li من خلال إضافتها بالإستعانة بجافاسكريت وليس قبل أن يتم تحميل الصفحة. لحل المشكلة قم بإجراء التعديلات التالية على الكود الخاص بك وستعمل لديك خاصية الحذف وأيضا إكمال المهمات.

// إحذف هذا الجزء من الكود لأنه لايعمل
// cheak.addEventListener("onclick" , function(){
//     li.classList.add("done");
// })
...
//بكامل محتوياته كما نقوم بإضافة الصنف الذي يعمل تنسيق معين يظهر لنا العنصر قد تم إنهاءه. إذا لم تنشئ هذا الصنف بعد يمكنك إنشاءه li قم بتعديل هذا الجزء ليصبح الكود فعالاً حيث تلاحظ أننا نحذف العنصر
// i هنا نربط الحذف والإكمال بالنقر على العنصر 
<i onclick="this.classList.add('done');" class="fa-circle-check fa-sharp fa-solid "></i>
<i onclick="li.remove()" class="fa-circle-xmark fa-solid" style="padding-left: 15px;"></i>
...
	

برجاء ارسال الكود كامل عشان افهم

بتاريخ 14 ساعات قال Mohammmed Mahmoud:

برجاء ارسال الكود كامل عشان افهم

هذا الكود الخاص بك والتعديلات على جزء صغير منه وهو واضح أليس كذلك؟ تحتاج الى إستبدال السطرين لديك في الكود بالسطرين الذين وضعتهما لك. هذا كل شيء.