javascript - 我的 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中添加card.innerHTML图片和相应的ID即可