我的JS没有操纵HTML元素

Question

I am trying to write code to put one image on a whole set of elements but allow a click to reveal certain images in certain elements.

So far, my JS hasn't changed any of the elements. If someone could look at it and give me suggestions, I would be very appreciative.

 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

One way to do it is make "card" class have a same "background-image" in CSS for all your cards while having empty divs. And then just add card.innerHTML images with corresponding ID's in JS when you need to flip a card