Как исправить "не могу прочитать свойство 'style' of undefined" массив вне функции

Question

Я пытаюсь создать анимацию, где несколько элементов начинаются с центра, а затем перемещаются наружу в случайные положения.Тем не менее, я получаю сообщение об ошибке Uncaught TypeError: Cannot set property 'left' of undefined at magic.html:71.

Я не могу понять, почему он не определен, поскольку он четко определен несколькими строками выше ?: "var fileArr = document.getElementsByClassName("rb");" Я думаю, что, возможно, этопотому что он пытается получить доступ к массиву из функции из оператора for?

Вот мой сценарий (у меня 100% есть 5 делений с классом "rb", и я 100% вызвал функцию в телезагрузить, и я использую JQuery.

function onLoad() {
    var wWidth = window.innerWidth - 260;
    var wHeight = window.innerHeight - 260;
    var fileArr = document.getElementsByClassName("rb");
    var finalPosW = [];
    var finalPosH = [];
    for(x = 0; x < fileArr.length; x++){
        finalPosW[x] = (Math.floor(Math.random() * wWidth) + 100) + "px";
        finalPosH[x] = (Math.floor(Math.random() * wHeight) + 100) + "px";
    }
    var fileArr = document.getElementsByClassName("rb");
    for(x = 0; x < fileArr.length; x++){
        var posW = 960;
        var posH = 540;
        setInterval(function(){
            if (posW == finalPosW && posH == finalPosH) {
                clearInterval();
            } else {
                posW++;
                posH++;
                fileArr.style.left = posW + 'px';
                fileArr.style.top = posH + 'px';
            }
        }, 5);
    }
}

Я не совсем уверен, что это будет работать даже без этой ошибки, но я хочу пересечь этот мост, когда я приду к нему, мне просто нужен этот массив для работы.

Answer 1

просьба изменить на

for(let x = 0; x < fileArr.length; x++){
        var posW = 960;
        var posH = 540;
        setInterval(function(x){
            if (posW == finalPosW && posH == finalPosH) {
                clearInterval();
            } else {
                posW++;
                posH++;
                fileArr[x].style.left = posW + 'px';
                fileArr[x].style.top = posH + 'px';
            }
        }.bind(this,x), 5);
    }