كيفية تعريف مصفوفة فارغة في جافاسكربت

أرجو إرفاق HTML أيضا

بتاريخ 4 دقائق مضت قال Wael Aljamal:

أرجو إرفاق HTML أيضا

<form class="taskform">
  <input id="inb" type="text" >
  <button id="add">add task</button>
 </form>
 <div class="tasks">

 </div>

أنت تقوم بإنشاء مصفوفة فيها عنصر بقيمة v والتي تكون null أول تشغيل البرنامج، فيكون tasks فيها عنصر وحيد فارغ

let tasks = [v];
console.log(tasks);

=>
v
null

tasks
[null]

length: 1

لذلك يمكنك بناء المصفوفة الفارعة من خلال باني المصفوفات في جافاسكربت

let tasks = Array();

وسيكون:

v
null

tasks
[]

length: 0

بتاريخ On 4‏/7‏/2022 at 22:52 قال Wael Aljamal:

أنت تقوم بإنشاء مصفوفة فيها عنصر بقيمة v والتي تكون null أول تشغيل البرنامج، فيكون tasks فيها عنصر وحيد فارغ

let tasks = [v];
console.log(tasks);

=>
v
null

tasks
[null]

length: 1

لذلك يمكنك بناء المصفوفة الفارعة من خلال باني المصفوفات في جافاسكربت

let tasks = Array();

وسيكون:

v
null

tasks
[]

length: 0

 

المشكلة بعد أن بنيت مصفوفة فارغة يتم إدخال البيانات بشكل صحيح بدون مشكل زيادة سترينغ في أول المصفوفة 

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

كيف أحل هذا المشكل 

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

المشكلة بعد أن بنيت مصفوفة فارغة يتم إدخال البيانات بشكل صحيح بدون مشكل زيادة سترينغ في أول المصفوفة 

أرجو إرفاق الشيفرات البرمجية بعد آخر تعديل (يستحسن كامل الصفحة)

بتاريخ 1 دقيقة مضت قال Wael Aljamal:

أرجو إرفاق الشيفرات البرمجية بعد آخر تعديل (يستحسن كامل الصفحة)

let btn= document.getElementById("add");
let v =window.localStorage.getItem('value');
console.log(v);
let taskform = document.querySelector('.tasks'); 
let tasks= Array();
console.log(tasks);

//حدث النقر على إضافة تاسك
    
btn.addEventListener('click',function(e){
    add();
    e.preventDefault();
    });
function add(){
    
       if (document.getElementById("inb").value===""){
                    // التحقق من ما إذا أدخلت قيمة في الحقل أو لا 
        }else{
                // جلب القيمة المدخلة في الحقل 
        val= document.getElementById("inb").value;
           // console.log(val.trim());
           
            //tasks[len]=val;
            // حقن القيمة في جدول 
           tasks.push(val);
           let len = tasks.length;
            console.log(tasks);
            
            console.log(len);
            // حفظ القيمة في التخزين المحلي 
            window.localStorage.setItem("value",tasks); 
            let task=tasks[len-1];
            let mydiv = document.createElement('div');
            mydiv.setAttribute('id',`my-div${len}`);
            let but = document.createElement('button');
            but.setAttribute('id',len);
            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);
            }

 }
// التحقق من ما إذا كانت هناك قيمة في التخزين المحلي 
if(window.localStorage.getItem('value')){
   // console.log(window.localStorage.getItem('value'));
   let arr= window.localStorage.getItem('value').split(",");
  
  //console.log(arr);   
   for(let i=0;i<arr.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(arr[i]);
    
    taskform.append(but);
    taskform.append(mydiv);

   }
}else{
    
    
}
//حدث النقر على إزالة تاسك

if(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;
    }
    

}

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

كيف أحل هذا المشكل 

لنراجع الشيفرة لديك، أنت تقوم بتعريف مصفوفة tasks لتضع فيها البيانات الجديدة ثم تخزنها نفسها في localStorage في المفتاح value هذا يحذف القيمة القديمة.

لذلك يتوجب نقل العناصر من v إلى tasks أول تشغيل البرنامج ثم تتابع التعامل مع tasks

let v = window.localStorage.getItem("value");
console.log(v);

let tasks = Array();
tasks.push(...(v.split(",")));
console.log(tasks);

السطر التالي يعطي خطأ، نتأكد من أن v فيها قيمة قبل جلب طولها

if (!v || v.length === 0) {
  console.log("tasks not found");
}

!v => اختبار هل هي فارغة

أو

طولها صفر

بتاريخ 4 دقائق مضت قال Wael Aljamal:

لنراجع الشيفرة لديك، أنت تقوم بتعريف مصفوفة tasks لتضع فيها البيانات الجديدة ثم تخزنها نفسها في localStorage في المفتاح value هذا يحذف القيمة القديمة.

لذلك يتوجب نقل العناصر من v إلى tasks أول تشغيل البرنامج ثم تتابع التعامل مع tasks

let v = window.localStorage.getItem("value");
console.log(v);

let tasks = Array();
tasks.push(...(v.split(",")));
console.log(tasks);

السطر التالي يعطي خطأ، نتأكد من أن v فيها قيمة قبل جلب طولها

if (!v || v.length === 0) {
  console.log("tasks not found");
}

!v => اختبار هل هي فارغة

أو

طولها صفر

 

أليس نفس الشئ أن تكون فارغة أو طولها صفر ؟

بتاريخ 9 دقائق مضت قال Wael Aljamal:

لنراجع الشيفرة لديك، أنت تقوم بتعريف مصفوفة tasks لتضع فيها البيانات الجديدة ثم تخزنها نفسها في localStorage في المفتاح value هذا يحذف القيمة القديمة.

لذلك يتوجب نقل العناصر من v إلى tasks أول تشغيل البرنامج ثم تتابع التعامل مع tasks

let v = window.localStorage.getItem("value");
console.log(v);

let tasks = Array();
tasks.push(...(v.split(",")));
console.log(tasks);

 

 

حتى بعد هذه الاضافة مزال يضيف لي قيمة فارغة اول المصفوفة لاحظ معي 

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

أليس نفس الشئ أن تكون فارغة أو طولها صفر ؟

جرب الاحتمالات الممكنة لقمية v ( كائن - مصفوفة ..)

• جرب المثال، ماذا تلاحظ؟

let v = []

if (v) {console.log('true')}

فارغة ممكن null - undefined و محاولة الوصول للخاصية تعطي خطأ

المهم عدم استدعاء خاصية لكائن لا يحوي قيمة

بتاريخ 5 ساعات قال Mohamed Lamin Mahmoudi:

أليس نفس الشئ أن تكون فارغة أو طولها صفر ؟

حتى بعد هذه الاضافة مزال يضيف لي قيمة فارغة اول المصفوفة لاحظ معي 

؟؟؟؟؟؟

بتاريخ 5 ساعات قال Mohamed Lamin Mahmoudi:

؟؟؟؟؟؟

لديك V سلسلة نصية، لا تضفها إلى tasks إن كانت فارغة اختبر محتواها قبل إسنادها ل tasks