خطأ عند إضافة مهام جديدة يتم حذف القديمة في جافاسكريبت

Mohamed Lotfi · 15 مارس 2022

الكود شغال تمام بس المشكله لما بضيف اكتر من مهمه بتروح المهمه القديمه بس انا بدي تضل يا ريت حدا يشوف الكود ويصححلي الخطأ

ملف "To do list.html"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="To do list.css">
    <script src="To do list.js" defer></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <div>
            <h1 class="h11">Task List</h1>
            <p class="p1">New task</p>
            <input type="text" class="input1">
            <button class="btn1">ADD TASK</button>
        </div>
        <hr>
        <div>
            <h1 class="h12">Tasks</h1>
            <input type="text" class="input2" placeholder="Filter tasks">
            <div class="container1" id="container1">
            </div>
            <button class="btn2">CLEAR TASK</button>
        </div>

    </div>
    <script>
    </script>
</body>

</html>

ملف "To do list.js"

var input1 = document.querySelector(".input1"),
    text1 = document.querySelector(".p1"),
    btn = document.querySelector(".btn1"),
    input2 = document.querySelectorAll(".input2"),
    container = document.getElementById("container1"),
    content = document.querySelector(".content"),
    div = document.createElement("div"),
    div2 = document.createElement("div"),
    div1 = document.createElement("div"),
    p = document.createElement("span"),
    x2 = document.createElement("span")

function tasks(value) {
    if (value.length < 1) {
        alert("Please enter a valid task");

    } else {
        console.log(value);
        container.appendChild(div).appendChild(div1);
        div.classList.add("content");
        div.appendChild(div2);
        p.innerText = value;
        p.classList.add("task");
        div1.appendChild(p);
        x2.innerText = "✕";
        x2.classList.add("x")
        div2.appendChild(x2)
        $(function strike() {
            $(".task").click(function() {
                $(this).toggleClass("strike");
            });
            $(".x").click(function() {
                $(this).parent().parent().remove();
            });

        })
    }


}

window.onload = function() {
    $(function strike() {
        $(".task").click(function() {
            $(this).toggleClass("strike");
        });
        $(".x").click(function() {
            $(this).parent().parent().remove();
        });

    })
}
btn.onclick = function() {
    tasks(input1.value);
}
input1.onfocus = function() {
    text1.classList.add("selected");
    text1.classList.remove("unselected");
};
input1.onblur = function() {
    text1.classList.add("unselected");
    text1.classList.remove("selected");
}

تم التعديل في 15 مارس 2022 بواسطة Hassan Hedr
توضيح العنوان وإضافة الشيفرة

Hassan Hedr · 15 مارس 2022

يجب نقل عملية إنشاء العناصر الجديدة الخاصة بسطر المهمة لداخل معالج حدث الإضافة ضمن التابع tasks حتى يتم إضافة سطر جديد في كل مرة، يمكن حل المشكلة بالتعديل إلى التالي:

var input1 = document.querySelector(".input1"),
    text1 = document.querySelector(".p1"),
    btn = document.querySelector(".btn1"),
    input2 = document.querySelectorAll(".input2"),
    container = document.getElementById("container1"),
    content = document.querySelector(".content")

function tasks(value) {
  if (value.length < 1) {
    alert("Please enter a valid task");
  } else {

    // إنشاء عناصر جديدة للمهمة
    var div = document.createElement("div"),
        div2 = document.createElement("div"),
        div1 = document.createElement("div"),
        p = document.createElement("span"),
        x2 = document.createElement("span")
   ...
  }
}

Mohamed Lotfi · 15 مارس 2022

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

يجب نقل عملية إنشاء العناصر الجديدة الخاصة بسطر المهمة لداخل معالج حدث الإضافة ضمن التابع tasks حتى يتم إضافة سطر جديد في كل مرة، يمكن حل المشكلة بالتعديل إلى التالي:


var input1 = document.querySelector(".input1"),
    text1 = document.querySelector(".p1"),
    btn = document.querySelector(".btn1"),
    input2 = document.querySelectorAll(".input2"),
    container = document.getElementById("container1"),
    content = document.querySelector(".content")

function tasks(value) {
  if (value.length < 1) {
    alert("Please enter a valid task");
  } else {

    // إنشاء عناصر جديدة للمهمة
    var div = document.createElement("div"),
        div2 = document.createElement("div"),
        div1 = document.createElement("div"),
        p = document.createElement("span"),
        x2 = document.createElement("span")
   ...
  }
}

شكرا كتير عل مساعده بس ممكن تشرحلي ليش ما شتغل معي قبل مشان اتعلم من الخطا

تم التعديل في 15 مارس 2022 بواسطة Hassan Hedr
تنسيق السؤال

Hassan Hedr · 15 مارس 2022

بتاريخ الآن قال Mohamed Lotfi:

شكرا كتير عل مساعده بس ممكن تشرحلي ليش ما شتغل معي قبل مشان اتعلم من الخطا

سابقًا كنت تقوم بإنشاء عنصر لوضع المهمة الجديدة ضمنه، وعند إضافة مهمة ثانية تقوم فقط بتعديل محتوى العنصر للمهمة السابقة وهذا خطأ، الصحيح في حالتك أن تقوم بإنشاء عناصر جديدة كليًا لكل مهمة جديدة وإضافتها لأسفل قائمة المهام بعد تعديل محتواها ليتضمن المهمة الجديدة

خطأ عند إضافة مهام جديدة يتم حذف القديمة في جافاسكريبت

السؤال

Mohamed Lotfi

3 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

Mohamed Lotfi

Hassan Hedr

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية