Мой 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

Один из способов сделать это - сделать так, чтобы у класса «карточка» было одинаковое «фоновое изображение» в CSS для всех ваших карточек при наличии пустых элементов div. А затем просто добавьте изображения card.innerHTML с соответствующими идентификаторами в JS, когда вам нужно перевернуть карту