Question

我正在尝试创建一个动画，其中几个元素从中心开始，然后向外移动到随机位置。但是，我不断收到错误Uncaught TypeError: Cannot set property 'left' of undefined at magic.html:71。

我无法弄清楚为什么它是未定义的，因为它显然在上面几行定义了？： “ var fileArr = document.getElementsByClassName("rb");” 我在想这也许是因为它试图从for语句中的函数中访问数组？

这是我的脚本（我100％拥有“ rb”类的5个div，而我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);
    }

如何在函数外部修复“无法读取未定义的属性'样式'”数组

1 个答案: