我的JS没有操作HTML元素

Question

我正在尝试编写代码，将一个图像放在整个元素集上，但允许单击以显示某些元素中的某些图像。

到目前为止，我的JS还没有更改任何元素。如果有人能看一下并给我一些建议，我将不胜感激。

​

const cards = document.querySelectorAll(".card");
const flipAllCards = function() {
  for (const card of cards) {
    card.innerHTML = `<img src="img/cardback.jpeg" alt="">`;
  }
};
flipAllCards();

function assignImages() {
  for (const card of cards) {
    const cardName = card.id;
    const imageName = `${cardName}.jpeg`;

    function flipCard(card) {
      card.innerHTML = `<img src="img/${imageName}" alt="">`;
      return card.innerHTML;
    }
    console.log(flipCard(card));
    card.addEventListener('click', function() {
      flipCard(card)
    });
  }
}
assignImages();

<div class="table">
  <div class="card" id="agentbrown"><img src="img/agentbrown.jpeg" alt=""></div>
  <div class="card" id="agentjones"><img src="img/agentjones.jpeg" alt=""></div>
  <div class="card" id="agentsmith"><img src="img/agentsmith.jpeg" alt=""></div>
  <div class="card" id="spoonboy"><img src="img/spoonboy.jpeg" alt=""></div>
  <div class="card" id="switch"><img src="img/switch.jpeg" alt=""></div>
  <div class="card" id="trinity"><img src="img/trinity.jpeg" alt=""></div>
</div>

​

Answer 1

一种方法是让"card“类在CSS中为你所有的卡片都有一个相同的”背景图像“，同时有一个空的div。然后当你需要翻牌时，只需在JS中添加具有相应ID的card.innerHTML图像