المشكلة : من أول نقرة يتاثر جميع عناصر ال اراي

المشكلة في الكود أنه يقوم بتغيير خاصية "marginLeft" لجميع العناصر في المصفوفة بنفس القيمة، وذلك بسبب الحلقة "while" التي تقوم بتطبيق التغييرات على جميع العناصر في كل دورة حتى تنتهي الحلقة.

أي أنه يجب جعل كل عنصر يتأثر بشكل مستقل عن الآخرين، باستخدام متغير "i" للإشارة إلى العنصر الحالي واستخدامه في التغيير عوضًا عن استخدام متغير "ii"، كما يجب ضبط قيمة "i" بشكل مناسب عندما تصل لحدود المصفوفة، كالتالي:

<!-- في الجانب الخاص بالـ HTML -->

<img id="image1" src="image1.jpg">
<img id="image2" src="image2.jpg">
<img id="image3" src="image3.jpg">
<button id="nextButton" style='display: block'>التالي</button>


<!-- في الجانب الخاص بالـ JavaScript -->
<script>
    const image1 = document.getElementById('image1');
    const image2 = document.getElementById('image2');
    const image3 = document.getElementById('image3');
    const nextButton = document.getElementById('nextButton');

    const imagesArray = [image1, image2, image3];

    let currentIndex = 0;

    const nextFun = () => {
        if (currentIndex < imagesArray.length) {
            imagesArray[currentIndex].style.marginLeft = '20px';
            currentIndex++;
        }
    };

    // إضافة حدث النقر (click event) إلى الزر
    nextButton.addEventListener('click', nextFun);
</script>

والآن عندما تضغط على الزر سيتم وضع إزاحة ناحية اليسار بقيمة 20 بكسل تبعًا لقيمة الـ index الحالي أي تستطيع الضغط 3 مرات فقط ولن يتم إضافة إزاحة بعد ذلك بسبب الشرط  if (currentIndex < imagesArray.length).

حسب ما فهمته من الكود الخاص بك، والمشكلة التي طرحتها فيبدو لي أنك تحاول تحريك الصور عند النقر على h1. ولكن يوجد خطأ في كودك. أولا، لقد كررت نفس العنصر img1 ثلاث مرات في المصفوفة. يجب أن تستخدم img2 و img3 للعناصر الأخرى. ثانيا، لقد استخدمت while loop بدلا من if statement. هذا يسبب حلقة لانهائية وتغيير margin-left لجميع العناصر في نفس الوقت. يجب أن تستخدم if statement للتحقق من قيمة i قبل تغيير margin-left للعنصر التالي. هذا مثال على كود مشابه:

img1=document.getElementById("img1");
img2=document.getElementById("img2");
img3=document.getElementById("img3");

myarray=[img1,img2,img3];

i=0;

function nextFun(){

if(i < 3){
myarray[i].style.marginLeft="20px";
i++;
}
}