随机翻转卡片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]);
  }

let card=document.createElement（“div”）；
让front=document.createElement（“div”）；
let back=document.createElement（“div”）；
前面。类列表。添加（“卡片前面”）；
back.classList.add（“卡片背面”）；
卡.附件（正面）；
卡片。儿童（背面）；
卡片。类列表。添加（“卡片”）；
设img=document.createElement（'img'）；
父母、子女（img）；
让卡片=[]；
for（设i=0；i<19；i++）{
设num=document.createElement（'card-front'）；
儿童数（i）；
卡片。推送（num）；
//num.textContent=r；
//pearent.appendChild（num）；
}
while（cards.length！=0）{
设r=Math.floor（Math.random（）*cards.length）；
设n=卡。拼接（r，1）；
parent.appendChild（n[0]）；
让cont=document.getElementById（“容器”）；
parent.appendChild（n[0]）；
}

---

正如@54ka已经说过的，您对

id

属性的使用是错误的。

id

必须是唯一的。所以它在整个文档中只能发生一次。这就是您的

文档.getElementById（）

无法正常工作的原因

下面的示例使用了一个由javascript随机化的。这意味着不需要删除和添加元素。它只是直接将顺序设置为随机。这要干净得多。此外，在我看来，这将更好地区分使用css完成的样式和使用javascript完成的“功能”

let cards=document.getElementsByClassName（“卡”）；
如果（卡片！==null）{
for（设i=0；i

.card容器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐内容：居中对齐；
宽度：430px；
填充：10px；
边框：1px实心#aaa；
}
.卡片{
填充：15px；
利润率：15px；
盒影：1px 1px 5px#aaa；
}

从HTML图片中可以看出，您对不同的元素重复使用相同的ID。你不能那样做！请将代码作为文本而不是图像发布。我的错！可能最大的错误是在每个元素中添加ID。flexbox布局非常有用+解释非常清楚。我完全同意，代码看起来更干净！谢谢！