随机卡只生成一次
Random card will generate only once
我正在尝试创建一个纸牌游戏，在这个游戏中，每次点击按钮，一张扑克牌就会显示一张随机的牌，但这只适用于第一次点击，之后什么都不起作用。我对编码很陌生，尤其是javascript尽管我尽了最大的努力，我还是无法获得剩下的牌。我相信这很简单。任何帮助都会很棒。
https://github.com/kingnarwal/Tv_Card_Game.git
只有在加载.js文件时才随机化，一次加载，而不是单击。
将以下部件添加到.js文件中：
var elementid = "button"; //Your Button-ID here
var button = document.getElementById(elementid);
button.onclick = function(){
//Your Random-Card-Generator-Code here
}
我希望这对你有帮助。
有几个问题：首先，您使用了重复的id（random_card_return）。我将它们更改为类。ID必须是唯一的。然后我不得不将您的元素选择器更改为：
document.querySelector("#card" + clickCounter + " .random_card_return").innerHTML = (imageArray[random_number]);
请参阅下面的完整代码，查看我在哪里声明clickCounter变量以及在哪里递增它。这很有效，因为每个卡（#card1等）都有一个唯一的id。唯一的问题是我制作了第一张卡#card0。
接下来，您正在生成的random_number在addEventListener回调函数之外，因此每次单击都将始终是相同的数字。将它移到回调函数内部，这样它每次都会生成一个新的数字。
代码可以从我发布的内容中得到进一步改进，例如，一旦你点击了所有的卡片，你就会遇到Uncaught TypeError: Cannot read property 'classList' of null错误。这很容易纠正，但我还是交给你吧。
JSFiddle演示
var clickCounter = 0;
document.querySelector("#clickbtn").addEventListener("click", function(ev) {
var el = document.querySelector(".flip-card:nth-child(1):not(.flipped), .flip-card.flipped + .flip-card:not(.flipped)");
var random_number = Math.floor(Math.random() * 50) + 1;
console.log(el);
el.classList.add("flipped");
document.querySelector("#card" + clickCounter + " .random_card_return").innerHTML = (imageArray[random_number]);
// Increment clickCounter
clickCounter++;
});
var imageArray = [("<img src='http://s20.postimg.org/ideyyn00p/image01.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/qk6yq7q3d/image02.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/6e8252jtl/image03.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/4np13l2ah/image04.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/ad59nw8gp/image05.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/530awlo7t/image06.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/4ergdnpi1/image07.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/dntmnrye1/image08.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/4hbc0ht5l/image09.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/jrb77oont/image10.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/3ucfayw9l/image11.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/gn0jaw7vd/image12.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/tu47z0ont/image13.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/hgrds3yzd/image14.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/l1n9bc3ix/image15.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/l2x74r5cp/image16.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/5ipte7v89/image17.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/xy56rikm1/image18.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/yrmdxvg0p/image19.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/5hkgyjis9/image20.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/47mnjhp09/image21.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/6evhl5jo9/image22.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/r1k76h32x/image23.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/x51rqdtcp/image24.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/avnujtxw9/image25.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/makboga8p/image26.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/60u5ljzkp/image27.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/apf7duv2x/image28.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/4e9zxftuh/image29.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/ucdm3gzbt/image30.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/iojk8xa6x/image31.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/qvbk0i09l/image32.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/w9exlsfdl/image33.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/8kzfqiiu1/image34.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/uzh46qlll/image35.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/zb5pvqsih/image36.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/pf4mw3mqh/image37.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/w6v1yybq1/image38.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/xzxyn9wwp/image39.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/49fff91ax/image40.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/4ngreuleh/image41.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/7vl8rw7o9/image42.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/qp71ow5w9/image43.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/tkk4vr9w9/image44.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/9r8131wih/image45.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/8q7sdxfix/image46.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/o07nl4b15/image47.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/vu896iiu1/image48.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/7rrfbn26x/image49.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/src4gvt95/image50.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/ygsd16zfd/image51.png' width='154px' height='231px';>"),
("<img src='http://s20.postimg.org/jyv5t7849/image52.png' width='154px' height='231px';>")
];h1 {
margin: 0;
}
.card-container {
-webkit-perspective: 700;
-ms-perspective: 700;
perspective: 700;
}
.flip-card.flipped {
-webkit-animation: card-flipper linear 0.5s;
animation: card-flipper linear 0.5s;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
@-webkit-keyframes card-flipper {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
@keyframes card-flipper {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
.back {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 154px;
height: 231px;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
a {
position: absolute;
top: 650px;
left: 825px;
width: 160px;
height: 45px;
background: lightblue;
}
#card0 {
position: absolute;
top: 100px;
left: 308px;
}
#card1 {
position: absolute;
top: 100px;
left: 539px;
}
#card2 {
position: absolute;
top: 100px;
left: 770px;
}
#card3 {
position: absolute;
top: 100px;
left: 1004px;
}
#card4 {
position: absolute;
top: 100px;
left: 1235px;
}
#card5 {
position: absolute;
top: 100px;
left: 1466px;
}
#card6 {
position: absolute;
top: 408px;
left: 308px;
}
#card7 {
position: absolute;
top: 408px;
left: 539px;
}
#card8 {
position: absolute;
top: 408px;
left: 770px;
}
#card9 {
position: absolute;
top: 408px;
left: 1004px;
}
#card10 {
position: absolute;
top: 408px;
left: 1235px;
}
#card11 {
position: absolute;
top: 408px;
left: 1466px;
}
#card0,
#card1,
#card2,
#card3,
#card4,
#card5,
#card6,
#card7,
#card8,
#card9,
#card10,
#card11 {
color: black;
text-align: center;
line-height: 160px;
width: 154px;
height: 231px;
border: 3px solid black;
border-radius: 7px;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}<div class="card-container">
<div class="flip-card" id="card0">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card1">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card2">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card3">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card4">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card5">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card6">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card7">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card8">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card9">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card10">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
<div class="flip-card" id="card11">
<div class="front">
<img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;>
</div>
<div class="back">
<div class="random_card_return"></div>
</div>
</div>
</div>
<a href="#card" id="clickbtn">Click Me</a>顺便说一句，也许你有原因，但你在HTML中加载jQuery，而不是在javascript中使用它。
相关文章：
- Javascript返回值只在循环中返回一次
- Jquery FadeIn FadeOut 只工作一次
- Javascript html每点击一次就会更改url
- 如何在chrome扩展中存储数据/结果，以及如何使用setTimeout使其只被调用一次
- Rails操作只调用一次，但我在ajax中每秒钟都调用一次
- jQuery滚动功能只工作一次
- 设置随机数，然后每5秒随机减少一次，直到达到0(javascript）
- 显示数字，然后每5秒随机更改一次(javascript）
- 当一次加载所有文件时，是否有来自阵列的10个随机闪存文件显示在页面上?(在javascript中）
- 随机卡只生成一次
- 随机图像显示不止一次
- 背景图像旋转器.php + jQuery每4秒显示一次随机照片
- 如何使用 Jquery 获取 XML 文件，并在每次加载时以随机顺序显示元素一次
- 网页上每 1/10 秒随机单词一次
- 使用 JS 随机化表行，同时一次显示一个表行
- 单击一次按钮即可用随机化值填充多个输入
- JS:如何在循环中随机化数组，但只允许每个值被选择一次
- 随机字符串选择器每次页面加载只执行一次
- 在angular模板中只生成一次随机id号
- 随机图像只应用一次
