Javascript 随机卡将只生成一次

我正在尝试创建一个纸牌游戏，在这个游戏中，每次点击一个按钮，一张扑克牌就会显示一张随机的牌，但是这只在第一次点击时起作用一次，之后就什么都没有了。我对编码特别是javascript非常陌生 尽管我尽了最大的努力，我还是无法得到剩下的牌。我相信这很简单。任何帮助都会很棒

---

只有在加载.js文件时才进行随机化，一次加载，而不是单击

将以下部分添加到.js文件中：

var elementid = "button"; //Your Button-ID here

var button = document.getElementById(elementid);
button.onclick = function(){


//Your Random-Card-Generator-Code here
}

---

我希望这对您有所帮助。

有两个问题：首先，您使用的是重复ID（

随机\u card\u return

），我将它们更改为类。ID必须是唯一的。然后，我必须将您的元素选择器更改为：

document.querySelector("#card" + clickCounter + " .random_card_return").innerHTML = (imageArray[random_number]);

请参阅下面的完整代码，以查看我在何处声明

clickCounter

变量以及在何处递增该变量。这是因为每张卡都有一个唯一的id（

#card1

，等等）。唯一的事情是我制作了第一张卡

#card0

接下来，您生成的

random_number

在

addEventListener

回调函数之外，因此每次单击都将始终是相同的数字。将其移动到回调函数内部，以便每次都生成一个新数字

代码可以从我发布的内容中进一步改进，例如，单击所有卡片后，您将遇到一个

未捕获的TypeError:cannotreadproperty'classList'的null

错误。这很容易纠正，但我会让你来决定

var clickCounter=0；
document.querySelector（“clickbtn”）.addEventListener（“click”，函数（ev）{
var el=document.querySelector（“.flip-card:n子（1）：未（.fliped），.flip-card.fliped+.flipcard:not（.fliped）”）；
var random_number=Math.floor（Math.random（）*50）+1；
控制台日志（el）；
el.classList.add（“翻转”）；
document.querySelector（“#card”+clickCounter+”.random#card_return”）.innerHTML=（imageArray[随机数字]）；
//增量点击计数器
单击计数器++；
});
var imageArray=[（“”），
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
(""),
("")
];
h1{
保证金：0；
}
.卡片容器{
-webkit透视图：700；
-ms透视图：700；
前景：700人；
}
.翻卡片{
-webkit动画：纸牌翻转器线性0.5s；
动画：扑克牌线性0.5s；
-webkit变换：旋转（180度）；
-ms变换：旋转（180度）；
变换：旋转（180度）；
}
@-webkit关键帧卡片翻转器{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
}
@关键帧卡片翻转器{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
}
.回来{
-webkit变换：旋转（180度）；
-ms变换：旋转（180度）；
变换：旋转（180度）；
}
.前线，
.回来{
位置：绝对位置；
排名：0；
左：0；
宽度：154px；
高度：231px；
-webkit背面可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
}
a{
位置：绝对位置；
顶部：650px；
左：825px；
宽度：160px；
高度：45px；
背景：浅蓝色；
}
#card0{
位置：绝对位置；
顶部：100px；
左：308px；
}
#卡片1{
位置：绝对位置；
顶部：100px；
左：539px；
}
#卡片2{
位置：绝对位置；
顶部：100px；
左：770px；
}
#卡片3{
位置：绝对位置；
顶部：100px；
左：1004px；
}
#卡片4{
位置：绝对位置；
顶部：100px；
左：1235px；
}
#卡片5{
位置：绝对位置；
顶部：100px；
左：1466px；
}
#卡片6{
位置：绝对位置；
顶部：408px；
左：308px；
}
#卡片7{
位置：绝对位置；
顶部：408px；
左：539px；
}
#卡片8{
位置：绝对位置；
顶部：408px；
左：770px；
}
#卡片9{
位置：绝对位置；
顶部：408px；
左：1004px；
}
#卡片10{
位置：绝对位置；
顶部：408px；
左：1235px；
}
#卡片11{
位置：绝对位置；
顶部：408px；
左：1466px；
}
#card0，
#卡片1，
#卡片2，
#卡片3，
#卡片4，
#卡片5，
#卡片6，
#卡片7，
#卡片8，
#卡片9，
#卡片10，
#卡片11{
颜色：黑色；
文本对齐：居中；
线高：160px；
宽度：154px；
高度：231px；
边框：3倍纯黑；
边界半径：7px；
-webkit过渡：所有0.6秒轻松；
过渡期：所有0.6秒缓解；
-webkit变换样式：保留-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
}

与添加代码链接不同，您能否在问题本身中添加一个代码示例？是的，正如@Matthijs所指出的，（包括问题本身中的代码示例），这将有助于将来访问此问题，因为您的源代码肯定会随着时间的推移而改变，第二，我们不能保证这个链接将来会被激活。谢谢你抽出时间来看我的第一个堆栈溢出问题。我会确保在我的下一个问题中包含一个代码示例。谢谢你的建议。非常感谢你花时间看我的问题。我总是觉得我应该能够解决这个问题