Javascript 在js中洗牌后，如何更改html中的图像？

我在html中有3张图片，我在我的js中通过它们的类获得它们，将它们洗牌，我需要使它们按洗牌顺序出现在html上，但它们从未改变。 以下是我的html代码：

var frontcards=document.getElementsByClassName（'cards'）；
var myCards=[]；
myCards.push（frontcards[0]）；
myCards.push（frontcards[1]）；
myCards.push（frontcards[2]）；
Array.prototype.shuffle=函数（）{
var输入=此；
对于（var i=input.length-1；i>=0；i--）{
var randomIndex=Math.floor（Math.random（）*（i+1））；
var itemAtIndex=输入[randomIndex]；
输入[i]=输入[i]；
输入[i]=项目索引；
}
返回输入；
}
var playButton=document.getElementById（“play”）；
playButton.onclick=函数（）{
myCards.shuffle（）；
对于（变量i=0；i

---

这是因为您正在设置

.innerHTML

，此时您应该设置

.src

以更改图像标记的图片：

playButton.onclick= function (){
    myCards.shuffle();
    for(var i = 0; i < myCards.length; i++){
        // Change .innerHTML to .src below
        document.getElementsByClassName('cards')[i].src=myCards[i].src;
    }
}

playButton.onclick=function（）{
myCards.shuffle（）；
对于（变量i=0；i

您正试图在应该设置源代码时设置innerHTML，为true，但是您还有一个可能不太明显的问题

myCards

和

document.getElementsByClassName（'cards'）

的结果都包含指向相同3个img标记的引用（或指针），但顺序不同。当您在其中一个数组中修改src时，它实际上会在两个数组中都更改它，因此您最终会得到重复的源

可能有一些解决方案需要重构代码，但这里有一个不需要。如果将元素附加为包含所有卡片的容器的子元素（在下面的代码中，我创建了一张卡片，但这取决于您自己的html设置），那么它会将特定卡片移动到容器的末尾。对所有牌都这样做，然后它们将按洗牌顺序排列。它只是对元素本身重新排序，这样您就不必担心更改src（我从下面的示例中删除了src，以便更容易看到它被洗牌）

var frontcards=document.getElementsByClassName（'cards'）；
var myCards=[]；
myCards.push（frontcards[0]）；
myCards.push（frontcards[1]）；
myCards.push（frontcards[2]）；
Array.prototype.shuffle=函数（）{
var输入=此；
对于（var i=input.length-1；i>=0；i--）{
var randomIndex=Math.floor（Math.random（）*（i+1））；
var itemAtIndex=输入[randomIndex]；
输入[i]=输入[i]；
输入[i]=项目索引；
}
返回输入；
}
var playButton=document.getElementById（“play”）；
playButton.onclick=函数（）{
myCards.shuffle（）；
var cards\u area=document.getElementById（“cards\u area”）
对于（变量i=0；i

.cards{
显示：内联；
过渡：所有1都易于输入输出；
}
.c1{
背景色：红色；
}
.c2{
背景颜色：蓝色；
}
.c3{
背景颜色：绿色；
}

播放

您的img标签后面跟着收尾div标签有什么特殊原因吗？@KhauriMcClain没有，这是个错误。单击按钮后，3张图片中的两张变成了相同的src，再次单击按钮后，所有3张图片都得到了相同的src。你能解释一下吗？洗牌法看起来不错。它可以命中同一个索引，没错，但它实际上交换了这些索引，而不是用随机索引中的值覆盖它们，因此您永远不会得到多个元素是相同值的结果，但您将得到a值没有移动的结果，这很好。我认为这实际上与

myCards

和

document.getElementsByClassName（'cards'）

引用相同的元素有关，通过更改src，它会影响两个数组，因此最终会产生重复的值。感谢分享。有没有办法显示洗牌的gui。我的意思是把红场移到蓝场，反之亦然！我相信为了做到这一点，您必须对代码进行一些非常重要的更改。（即基本上重构它）。至少你必须跟踪和/或设置卡片的位置，这样它们甚至可以被设置动画。我找到了一个叫做的图书馆，它可能会帮你解决这个问题。