如何修复动画开发中「Cannot set property 'left' of undefined」错误

我来帮你拆解一下问题所在，以及对应的修复方案：

核心错误原因 #

1. HTMLCollection访问错误
   document.getElementsByClassName("rb")返回的是一个HTMLCollection（类数组对象），你直接用fileArr.style是错误的，必须通过索引访问单个元素，比如fileArr[x].style。但这里还有个更隐蔽的问题：

2. 循环中的闭包陷阱
   你在for循环里直接使用setInterval，而定时器回调函数会在循环结束后才执行，此时循环变量x已经变成了fileArr.length（也就是5），这时候访问fileArr[x]自然就是undefined，所以会抛出设置left属性失败的错误。

3. 其他附带逻辑问题

• 重复定义了var fileArr，完全没必要；
• 终止条件posW == finalPosW && posH == finalPosH逻辑错误，finalPosW是数组，你应该和对应索引的目标值比较，而且目标值是带px的字符串，要转成数字再和posW（数字）对比；
• clearInterval()没传入定时器ID，根本无法停止定时器。

修复后的完整代码 #

function onLoad() {
    var wWidth = window.innerWidth - 260;
    var wHeight = window.innerHeight - 260;
    var fileArr = document.getElementsByClassName("rb");
    var finalPosW = [];
    var finalPosH = [];

    // 先预生成所有目标位置（转成数字，方便后续比较）
    for(let x = 0; x < fileArr.length; x++){
        finalPosW[x] = Math.floor(Math.random() * wWidth) + 100;
        finalPosH[x] = Math.floor(Math.random() * wHeight) + 100;
    }

    for(let x = 0; x < fileArr.length; x++){
        let posW = 960;
        let posH = 540;
        // 保存当前元素和目标位置，规避闭包陷阱
        const currentEl = fileArr[x];
        const targetW = finalPosW[x];
        const targetH = finalPosH[x];

        // 保存定时器ID，用于后续停止定时器
        const timer = setInterval(function(){
            // 用绝对值差判断是否到达目标位置，避免步长问题导致无法停止
            const isReachW = Math.abs(posW - targetW) <= 1;
            const isReachH = Math.abs(posH - targetH) <= 1;
            if (isReachW && isReachH) {
                clearInterval(timer);
                // 最后把位置精确设置到目标值
                currentEl.style.left = targetW + 'px';
                currentEl.style.top = targetH + 'px';
            } else {
                // 根据目标位置调整移动方向，不再固定只往右下走
                if(posW < targetW) posW++;
                else if(posW > targetW) posW--;
                
                if(posH < targetH) posH++;
                else if(posH > targetH) posH--;
                
                currentEl.style.left = posW + 'px';
                currentEl.style.top = posH + 'px';
            }
        }, 5);
    }
}

关键修复点说明 #

• 使用let声明循环变量x，替代var，让每次循环都创建独立的x作用域，彻底规避闭包陷阱；
• 提前把当前操作的元素currentEl和目标位置targetW/targetH保存到循环内部变量中，确保定时器回调能正确获取对应的值；
• 修改移动逻辑，让元素能向随机生成的目标位置正确移动（之前固定posW++和posH++只会往右下移动，不管目标位置在哪）；
• 修正终止条件的判断逻辑，用绝对值差判断是否到达目标，避免因为步长问题无法触发停止；
• 保存定时器IDtimer，确保能正确清除定时器。

内容的提问来源于stack exchange，提问作者O.Veness