هل الدالة الابن تستدعى وتعمل بغض النظر عن استدعاء الدالة الاب لها

هل يمكنك إيضاح سؤالك اكثر حتى استطيع مساعدتك

بتاريخ 4 دقائق مضت قال عمر قره محمد:

هل يمكنك إيضاح سؤالك اكثر حتى استطيع مساعدتك

الزر delete يعمل بدون أن أنقر على زر الاضافة لماذا ؟

وأنا أريد أن أحذف فقط النص المضاف أخيرا أي بعدما أضيف نصا أستطيع ان احذفه هو فقط إن أردت أن أحذف نصا أخر يجب على الزر ألا يعمل 

بتاريخ 8 دقائق مضت قال Mohamed Lamin Mahmoudi:

الزر delete يعمل بدون أن أنقر على زر الاضافة لماذا ؟

وأنا أريد أن أحذف فقط النص المضاف أخيرا أي بعدما أضيف نصا أستطيع ان احذفه هو فقط إن أردت أن أحذف نصا أخر يجب على الزر ألا يعمل 

كيف يعمل زر الـ delete بدون ان تنقر على زر الاضافة، وزر الـ delete لا يتم انشاءه إلا بعد ان تقوم بإضافة عنصر جديد؟

هل يمكنك الايضاح اكثر رجاءً.

بتاريخ 4 دقائق مضت قال عمر قره محمد:

كيف يعمل زر الـ delete بدون ان تنقر على زر الاضافة، وزر الـ delete لا يتم انشاءه إلا بعد ان تقوم بإضافة عنصر جديد؟

هل يمكنك الايضاح اكثر رجاءً.

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

إن ضغطت بعدها على زر الحذف لأحذف عنصر أخر أريده أن لا يعمل .

هذا هو مقصودي أي أن زر يعمل مرة فقط ويحذف العنصر المضاف تاليا فقط. 

بتاريخ 9 دقائق مضت قال Mohamed Lamin Mahmoudi:

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

إن ضغطت بعدها على زر الحذف لأحذف عنصر أخر أريده أن لا يعمل .

هذا هو مقصودي أي أن زر يعمل مرة فقط ويحذف العنصر المضاف تاليا فقط. 

أوك، مافهمت منك انك تريد أن يكون العناصر الأربعة الموجودين من قبل غير قابلين للحذف، أليس كذلك ؟

لفعل ذلك يمكنك إضافة هذه العناصر بشكل مستقل عن الآلية كلها، بمعنى ان تضيفهم كـ html ,وتضيف للأزرار delete الخاصة بها الخاصية disabled.

بتاريخ 1 دقيقة مضت قال عمر قره محمد:

اوك

أوك، مافهمت منك انك تريد أن يكون العناصر الأربعة الموجودين من قبل غير قابلين للحذف، أليس كذلك ؟

لفعل ذلك يمكنك إضافة هذه العناصر بشكل مستقل عن الآلية كلها، بمعنى ان تضيفهم كـ html ,وتضيف للأزرار delete الخاصة بها الخاصية disabled.

كيف أعمل ذلك، وإن كان لدي عنصر وحيد وأضفت له عنصر  جديد كيف أجعل العنصر الأخير قابل للحذف والعنصر الأول لا ،هل في كل مرة أعمل هذا العمل ،أرجو مراجعة الشيفرة الخاصة بي 

بتاريخ 24 دقائق مضت قال Mohamed Lamin Mahmoudi:

كيف أعمل ذلك، وإن كان لدي عنصر وحيد وأضفت له عنصر  جديد كيف أجعل العنصر الأخير قابل للحذف والعنصر الأول لا ،هل في كل مرة أعمل هذا العمل ،أرجو مراجعة الشيفرة الخاصة بي 

إن ما فهمته منك سابقاً انك تريد ان يكون هنالك مجموعة من الملاحظات موجودة بشكل افتراضي وغير قابلة للحذف، ولكن الان فهمت شيء مختلف.

وهو انك تريد ان يكون العنصر المضاف آخراً هو الوحيد القابل للحذف، ولفعل ذلك كل ما تريد فعله هو حذف الـ delete من العنصر القديم أو إيقافه بعمل disabled عند اضافة عنصر جديد، وذلك بالشكل التالي :

// نعدل الكود التالي 
but.setAttribute('id',len-1);
// ليصبح 
but.setAttribute('id',`delete${len-1}`);
// ونضيف الكود التالي 
oldBut= document.getElementById(`delete${len-2}`);           
oldBut.disabled = true;

لتصبح الوظيفة الخاصة بك تشبه التالي :

function add() {
    if (document.getElementById("inb").value === "") {
        // التحقق من ما إذا أدخلت قيمة في الحقل أو لا 
    } else {     // جلب القيمة المدخلة في الحقل 
        val = document.getElementById("inb").value;
        tasks.push(val);
        console.log(tasks);
        // حفظ القيمة في التخزين المحلي 
        window.localStorage.setItem("value", tasks);
        let x = window.localStorage.getItem('value');
        console.log(x);
        let len = x.split(",").length;
        console.log(len);
        let task = tasks[len - 1];
        let mydiv = document.createElement('div');
        mydiv.setAttribute('id', `my-div${len - 1}`);
        const oldBut = document.getElementById(`delete${len - 2}`);
        oldBut.disabled = true;
        let but = document.createElement('button');
        but.setAttribute('id', `delete${len - 1}`);
        but.style.cssText = "position: relative;background-color: #d71a0c;color: antiquewhite;border: 0cm;height: 25px;border-radius: 5px;cursor: pointer;left: -31px;top: 14px;width: 62px;"
        let textbut = document.createTextNode("delete");
        but.appendChild(textbut);
        mydiv.style.cssText = "background-color: white;width: 179px;height: 25px;top: -12px;position: relative;  left: -108px;border: 0cm;border-radius: 4px;    direction: ltr;text-indent: 5px;"
        mydiv.append(task);
        taskform.append(but);
        taskform.append(mydiv);
        console.log(tasks);
        but.onclick = function () {
            let newarr = x.split(",");
            let spliced = newarr.splice(len - 1, 1);
            window.localStorage.setItem('value', newarr);
            mydiv.remove();
            but.remove();
        }
    }
}

بتاريخ 1 دقيقة مضت قال عمر قره محمد:

إن ما فهمته منك سابقاً انك تريد ان يكون هنالك مجموعة من الملاحظات موجودة بشكل افتراضي وغير قابلة للحذف، ولكن الان فهمت شيء مختلف.

وهو انك تريد ان يكون العنصر المضاف آخراً هو الوحيد القابل للحذف، ولفعل ذلك كل ما تريد فعله هو حذف الـ delete من العنصر القديم أو إيقافه بعمل disabled عند اضافة عنصر جديد، وذلك بالشكل التالي :

// نعد الكود التالي 
but.setAttribute('id',len-1);
// ليصبح 
but.setAttribute('id',`delete${len-1}`);
// ونضيف الكود التالي 
oldBut= document.getElementById(`delete${len-2}`);           
oldBut.disabled = true;

لتصبح الوظيفة الخاصة بك تشبه التالي :

function add() {
    if (document.getElementById("inb").value === "") {
        // التحقق من ما إذا أدخلت قيمة في الحقل أو لا 
    } else {     // جلب القيمة المدخلة في الحقل 
        val = document.getElementById("inb").value;
        tasks.push(val);
        console.log(tasks);
        // حفظ القيمة في التخزين المحلي 
        window.localStorage.setItem("value", tasks);
        let x = window.localStorage.getItem('value');
        console.log(x);
        let len = x.split(",").length;
        console.log(len);
        let task = tasks[len - 1];
        let mydiv = document.createElement('div');
        mydiv.setAttribute('id', `my-div${len - 1}`);
        const oldBut = document.getElementById(`delete${len - 2}`);
        oldBut.disabled = true;
        let but = document.createElement('button');
        but.setAttribute('id', `delete${len - 1}`);
        but.style.cssText = "position: relative;background-color: #d71a0c;color: antiquewhite;border: 0cm;height: 25px;border-radius: 5px;cursor: pointer;left: -31px;top: 14px;width: 62px;"
        let textbut = document.createTextNode("delete");
        but.appendChild(textbut);
        mydiv.style.cssText = "background-color: white;width: 179px;height: 25px;top: -12px;position: relative;  left: -108px;border: 0cm;border-radius: 4px;    direction: ltr;text-indent: 5px;"
        mydiv.append(task);
        taskform.append(but);
        taskform.append(mydiv);
        console.log(tasks);
        but.onclick = function () {
            let newarr = x.split(",");
            let spliced = newarr.splice(len - 1, 1);
            window.localStorage.setItem('value', newarr);
            mydiv.remove();
            but.remove();
        }
    }
}

 

نعم هذا ماكنت أقصد .

لكن مالم أفهم هو أنني وضعت دالة الحذف وسط دالة الاضافة أي بعد أن أضيف عنصر أستطيع أن أحسبه هو فقط، لكنني الاحظ أنني استطيع ان احذف جميع العناصر لماذا؟؟؟؟

هل دالةالحذف تنفذ بغض النظر عن ما إذا أضفت عنصر جديد أو لا.ملاحظة (طبعا يوجد عنصر على الأقل)

إن لم تفهم سؤالي هل إذا كانت لدي دالة وسط دالة هل الدالة الأبن تعمل حتى إذا لم تستدعى الدالة الأب لها ؟؟

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

نعم هذا ماكنت أقصد .

لكن مالم أفهم هو أنني وضعت دالة الحذف وسط دالة الاضافة أي بعد أن أضيف عنصر أستطيع أن أحسبه هو فقط، لكنني الاحظ أنني استطيع ان احذف جميع العناصر لماذا؟؟؟؟

هل دالةالحذف تنفذ بغض النظر عن ما إذا أضفت عنصر جديد أو لا.ملاحظة (طبعا يوجد عنصر على الأقل)

إن لم تفهم سؤالي هل إذا كانت لدي دالة وسط دالة هل الدالة الأبن تعمل حتى إذا لم تستدعى الدالة الأب لها ؟؟

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

أريد المساعدة في فكرة الحذف عموما

وضعت حالتين  الحالة الاولى وهي الحذف بعد ان  أضيف كل الملاحظات وأبدأ أحذف العنصر ومن ثم أحمل الصفحة ثم أحذف العنصر الذي بعده ومن ثم اعيد تحميل الصفحة ,نجحت في عمل هذه الحالة.

الحالة الثانية هي الحذف قبل تحميل الصفحة أي يمكنني حذف أي ملاحظة من التخزين المحلي قبل تحميل الصفحة ,لم أستطع أن أطبق هذه الحالة بطريقة صحيحة 

   // window.localStorage.clear();

    let btn= document.getElementById("add");
    let v =window.localStorage.getItem('value');
    console.log(v);
    let taskform = document.querySelector('.tasks'); 
    let tasks= Array();
    if(!v ){
    }else{
        tasks.push(...(v.split(",")));
    }
    console.log(tasks);
    if(v && v.length!==0){
    // console.log(window.localStorage.getItem('value'));
   //console.log(arr);   
    for(let i=0;i<tasks.length;i++){
     let mydiv = document.createElement('div');
     mydiv.setAttribute('id',`my-div${i}`);
     let but = document.createElement('button');
     but.setAttribute('id',i);
     but.style.cssText="position: relative;background-color: #d71a0c;color: antiquewhite;border: 0cm;height: 25px;border-radius: 5px;cursor: pointer;left: -31px;top: 14px;width: 62px;"
     let textbut= document.createTextNode("delete");
     but.appendChild(textbut);
     mydiv.style.cssText="background-color: white;width: 179px;height: 25px;top: -12px;position: relative;  left: -108px;border: 0cm;border-radius: 4px;    direction: ltr;text-indent: 5px;"
     mydiv.append(tasks[i]);
     taskform.append(but);
     taskform.append(mydiv);

    }
 }else{  
 }
 
//حدث النقر على إضافة تاسك    
    btn.addEventListener('click',function(e){
          e.preventDefault();
          add();
    });
    btn.addEventListener('click',function(e){
        add();
        e.preventDefault();
        });
       function add(){
      if (document.getElementById("inb").value===""){
                        // التحقق من ما إذا أدخلت قيمة في الحقل أو لا 
      }else{     // جلب القيمة المدخلة في الحقل 
            val= document.getElementById("inb").value;           
               tasks.push(val);
                console.log(tasks);
                // حفظ القيمة في التخزين المحلي 
                window.localStorage.setItem("value",tasks);
               let x=window.localStorage.getItem('value');
                console.log(x); 
                let len = x.split(",").length;
                console.log(len);
                let task=tasks[len-1];
                let mydiv = document.createElement('div');
                mydiv.setAttribute('id',`my-div${len-1}`);
                let but = document.createElement('button');
                but.setAttribute('id',len-1);  
                but.style.cssText="position: relative;background-color: #d71a0c;color: antiquewhite;border: 0cm;height: 25px;border-radius: 5px;cursor: pointer;left: -31px;top: 14px;width: 62px;"
                let textbut= document.createTextNode("delete");
                but.appendChild(textbut);
                mydiv.style.cssText="background-color: white;width: 179px;height: 25px;top: -12px;position: relative;  left: -108px;border: 0cm;border-radius: 4px;    direction: ltr;text-indent: 5px;"
                mydiv.append(task);
                taskform.append(but);
                taskform.append(mydiv);
                console.log(tasks);
                but.onclick=function(){
                    let newarr=x.split(",");
                    let spliced=newarr.splice(len-1,1);
                    window.localStorage.setItem('value',newarr);
                    mydiv.remove();
                    but.remove();
                }
                }
     }

    if( !v || v.length === 0){
        console.log("tasks not found");
    }else{
        let newarr= v.split(',');
         console.log(newarr);
        for(let i=0; i<newarr.length;i++){
            i.toString();
            let del=document.getElementById(`${i}`);
            
            del.addEventListener('click',function(){
             let  de=document.getElementById(`${i}`);
             console.log(newarr);
             //  let va=newarr.splice(i,1);
             let spliced= newarr.splice(i,1);
               
             //  console.log(va);
               console.log(spliced);
              
               window.localStorage.setItem("value",v);
               console.log(v);
               let myd=document.getElementById(`my-div${i}`);
               myd.remove();
               de.remove();
            })
            v=newarr;
        }
    }