随机卡只会生成一次

Question

我正在尝试创建一个卡片游戏，其中每次点击一个按钮时，一张扑克牌就会显示一张随机卡片，但是这只能在第一次点击后使用一次，之后没有任何内容。我是一个很新的编码特别是javascript 尽管我付出了最大的努力，但我还是无法生成剩余的卡片。我确定它很简单。任何帮助都会很棒。

https://github.com/kingnarwal/Tv_Card_Game.git

Answer 1

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

Answer 2

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

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

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


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

我希望这会对你有所帮助。

Answer 3

一些问题：首先你使用重复的id（random_card_return。）我把它们改成了一个类。 ID必须是唯一的。然后我必须将元素选择器更改为：

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

请参阅下面的完整代码，了解我声明clickCounter变量的位置以及增量位置。这是有效的，因为每张卡片都有一个唯一的ID（#card1等）。唯一的问题是我制作了第一张卡#card0。

接下来，您生成的random_number位于addEventListener回调函数之外，因此每次点击时它始终是相同的数字。将其移至回调函数内部，以便每次都生成一个新数字。

代码可以从我发布的内容中进一步改进，例如，一旦您点击了所有卡片，就会遇到Uncaught TypeError: Cannot read property 'classList' of null错误。这很容易纠正，但我会留给你。

<强> JSFiddle DEMO

＆＃13;

＆＃13;

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';>")

];

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

顺便说一句，也许你有理由这样做，但是你在HTML中加载jQuery而不是在你的javascript中使用它。