随机翻页卡HTML JavaScript

问题描述

我应该让一组卡片随机出现，但由于控制台上看到的大量错误，我似乎无法这样做。我仍在学习过程中，因此对编写JavaScript不确定。有38张照片卡，当我刷新页面时，照片应该会更改其顺序。

  let card = document.createElement("div");
  let front = document.createElement("div");
  let back = document.createElement("div");
  front.classList.add("card-front");
  back.classList.add("card-back");
  card.appendChild(front);
  card.appendChild(back);
  card.classList.add("card");
  let img = document.createElement('img');
  parent.appendChild(img);

  let cards = [];
  for (let i = 0; i < 19; i++) {
    let num = document.createElement('card-front');
    num.appendChild(i);
    cards.push(num);
    //num.textContent = r;
    //pearent.appendChild(num);
  }

  while(cards.length != 0) {
    let r = Math.floor(Math.random()*cards.length);
    let n = cards.splice(r,1);
    parent.appendChild(n[0]);
    let cont = document.getElementById("CONTAINER");
    parent.appendChild(n[0]);
  }

The HTML looks like this

解决方法

正如@ 54ka所说，您对id属性的使用是错误的。 id必须是唯一的。因此，它在整个文档中只能出现一次。这就是为什么您的document.getElementById()无法正常工作的原因。

下面的示例将flexbox layout与由JavaScript随机分配的flexbox order property一起使用。这意味着没有元素的删除和添加。它只是将顺序直接设置为随机。这很干净。同样，这在用CSS完成的样式和由javascript完成的“功能”之间更好地分开（在我看来）。

let cards = document.getElementsByClassName("card");
if(cards !== null){
  for(let i = 0; i < cards.length; i++){
    cards.item(i).style.order = parseInt(Math.random() * 1000);
  }
 }

.card-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: 430px;
  padding: 10px;
  border: 1px solid #aaa;
}

.card{
  padding: 15px;
  margin: 15px;
  box-shadow: 1px 1px 5px #aaa;
}

<div class="card-container">
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/ff0000" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/00ff000" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/0000ff" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/ffff00" />
    </div>
  </div>
</div>

如果您要坚持添加和删除（我不建议！），则可以使用以下代码：

let cards = document.getElementsByClassName("card");
if(cards !== null){
  // create a list that contains all indices of the cards
  let card_indices = [];
  for(let i = 0; i < cards.length; i++){
    card_indices.push(i);
  }
  
  // randomize the card indices and insert the card
  for(let i = 0; i < cards.length; i++){
    // get a random card index
    let j = Math.floor(Math.random() * card_indices.length);
    // re-add this element to the same parent to the front,adding
    // all elements will shuffle them
    let card = cards.item(card_indices[j]);
    card.parentNode.appendChild(card);
    // mark this index as taken
    card_indices.splice(j,1);
  }
 }

<div class="card-container">
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/ff0000" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/00ff000" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/0000ff" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/ffff00" />
    </div>
  </div>
</div>