إدارة المصفوفة في جافا سكريبت

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

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

1. الأخطاء الإملائية: لديك أخطاء إملائية في اسم المتغيرات، على سبيل المثال، ArrStr و arrstr ليست نفس الشيء، لذلك عند استخدامها يجب أن تكون متماثلة بالحروف الكبيرة والصغيرة.

2. استخدام indexOf بشكل غير صحيح: عند استخدام indexOf للبحث عن العنصر في المصفوفة، يجب عليك أن تستخدم نفس القيمة التي تستخدمها لإضافة العنصر إلى المصفوفة. ولكنك تستخدم document.getElementById("Arr").value وهو غير صحيح. يجب عليك استخدام القيمة المدخلة في المربع النصي بدلاً من ذلك.

3. استخدام splice بشكل غير صحيح: عند استخدام splice لإزالة العنصر من المصفوفة، يجب تمرير الفهرس الصحيح للعنصر الذي تريد إزالته. في حالتك، يمكنك استخدام الفهرس الذي تم العثور عليه باستخدام indexOf.

4. استخدام الأحداث بشكل صحيح: تحتاج إلى التأكد من استخدام الأحداث بشكل صحيح في HTML، مثل استخدام onclick بدلاً من text.

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

htmlCopy code
function But2Click(){
    var valueToRemove = document.getElementById("TxtBox").value;
    var indexToRemove = ArrStr.indexOf(valueToRemove);
    
    if(indexToRemove > -1){
        ArrStr.splice(indexToRemove, 1);
        document.getElementById("Arr").innerHTML = ArrStr;
    }
}

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

بعد تصحيح الأخطاء المذكورة أعلاه، يمكن للمستخدمين الآن إضافة وإزالة النصوص من المصفوفة بسلاسة. لكن دعونا نلقي نظرة أعمق على الكود لفهم كيف يعمل:

في البداية، قمت بتعريف مصفوفة ArrStr التي تحتوي على النصوص التي تريد إدارتها. ثم قمت بتعريف دالتين: دالة LoadArr() التي تستدعى عند تحميل الصفحة لعرض المصفوفة في عنصر h2، ودالة But1Click() التي تضيف النص المدخل في مربع النص إلى المصفوفة عند النقر على زر “Push into Array”.

ثم، قمت بتعريف دالة But2Click() التي تُستدعى عند النقر على زر “Remove from Array” لإزالة النص من المصفوفة. في هذه الدالة، تم استخدام indexOf للعثور على موضع العنصر المراد إزالته في المصفوفة. إذا تم العثور على العنصر، يتم استخدام splice لإزالته من المصفوفة.

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

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