JavaScript中div元素重叠问题求助：随机分配位置重复取值致重叠

你的代码核心问题是**splice方法使用错误**：list.splice(r)会从索引r开始删除数组中所有剩余元素，而非仅删除选中的那一个。这导致数组快速被清空或只剩少量元素，后续循环只能重复取相同值，甚至出现undefined导致div无位置。另外变量r未声明，会造成全局污染。

修复方案1：正确使用splice #

修改splice的调用方式，指定删除1个元素，同时声明r为局部变量：

var list = [100,210,320,430];
var square1 = document.getElementById("square1")
var square2 = document.getElementById("square2")
var square3 = document.getElementById("square3")
var square4 = document.getElementById("square4")
var squares = [square1,square2,square3,square4]

for(let looprun = 0; looprun < 4; looprun++){    
    let r = Math.floor(Math.random() * list.length)                       
    squares[looprun].style.left = list[r] + "px";
    // 只删除索引r处的1个元素
    list.splice(r, 1)
    if(looprun === 3){
        console.log("End of Loop Reached")
    }   
}

修复方案2：先洗牌再分配（更简洁可靠） #

用Fisher-Yates洗牌算法先打乱位置数组，再按顺序分配给div，逻辑更清晰，避免循环中修改原数组的问题：

var positions = [100,210,320,430];
var squares = [
    document.getElementById("square1"),
    document.getElementById("square2"),
    document.getElementById("square3"),
    document.getElementById("square4")
];

// Fisher-Yates洗牌算法打乱数组
for (let i = positions.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [positions[i], positions[j]] = [positions[j], positions[i]];
}

// 按顺序分配位置
squares.forEach((square, index) => {
    square.style.left = positions[index] + "px";
});
console.log("End of Assignment");

这两种方法都能保证每个div获取唯一的位置值，不会出现重叠或未分配的情况。

内容的提问来源于stack exchange，提问作者Cookie Man