Javascript 如何让我的洗牌按钮洗牌我的阵型中的棋子？

我正在创建一个瓷砖交换拼图，在编写javascript后遇到了一个问题。我的拼图一点也不乱。我想确保当页面加载时，谜题已经解决，这样用户就可以使用按钮将其洗牌。我想知道我的初始化函数是否与问题有关，因为它应该在开始时显示已解决的难题。我如何处理这个问题

链接到JSFIDLE：

var selpages=[]；
var allPieces=document.getElementById（“img持有者”）；
函数初始化（）
{
orderArray=[]
对于（变量i=0；i

*{
框大小：边框框；
}
身体{
保证金：0；
背景：径向梯度（#9D5900，#3D2200）；
}
.游戏容器{
显示：网格；
网格模板列：重复（4，自动）；
栅隙：10px；
利润率：50像素；
证明内容：中心；
}
.卡片{
身高：100%；
宽度：100%；
}
.img支架{
弹性基准：50%；
}

洗牌

我发现了4个与随机播放相关的错误，而不是将代码中的片段随机化。首先，您使用的是

getElementsById

而不是

getElementsByClassName

，后者将只返回一个元素（这不是因为

img holder

是一个类而不是id），因此长度是未定义的。其次，您没有在

initialize

函数中调用

shuffle

。第三，在for循环中，您使用的是

allSlices.length

，即使变量名为

allPieces

。第四，您正在执行

allPieces.addEventListener

，即使这是一个数组，也要使用

allPieces[i].addEventListener

var selpages=[]；
var allPieces=document.getElementsByClassName（“img持有者”）；//第一
函数初始化（）
{
orderArray=[]
对于（变量i=0；i

*{
框大小：边框框；
}
身体{
保证金：0；
背景：径向梯度（#9D5900，#3D2200）；
}
.游戏容器{
显示：网格；
网格模板列：重复（4，自动）；
栅隙：10px；
利润率：50像素；
证明内容：中心；
}
.卡片{
身高：100%；
宽度：100%；
}
.img支架{
弹性基准：50%；
}