我正在制作纸牌游戏，我想在点击后更改图像

Question

 import Deck from "./deck2.js" const deck = new Deck() var playerCardImg = deck.cards[0].image; createCard() createCard() createCard() var cards = Array.from(document.getElementsByClassName("card")) cards.forEach(card => { card.addEventListener("click", () => { card.classList.toggle("flipCard") var playerCard = deck.pop() playerCardImg = playerCard.image cardImg.setAttribute("src", playerCardImg); innerInnerCardDiv.appendChild(cardImg) }); }); function createCard() { var cardImg = document.createElement('IMG') var cardText = document.createElement('h1') var cardDiv = document.createElement('div') var innerCardDiv = document.createElement('div') var innerInnerCardDiv = document.createElement('div') var innerInnerCardDiv2 = document.createElement('div') cardDiv.classList.add("maincontainer") innerCardDiv.classList.add("card") innerInnerCardDiv2.classList.add("back") cardImg.setAttribute("src", playerCardImg); cardImg.classList.add("front") cardText.innerText = "Beast Battle" document.body.appendChild(cardDiv) cardDiv.appendChild(innerCardDiv) innerCardDiv.appendChild(innerInnerCardDiv) innerCardDiv.appendChild(innerInnerCardDiv2) innerInnerCardDiv.appendChild(cardImg) innerInnerCardDiv2.appendChild(cardText) return cardDiv }

I thought by doing this:

cardImg.setAttribute("src", playerCardImg);

I'd be able to change the image but it doesn't work Note: When I click the card, it does flip. The problem is that since it doesn't change the image, all the cards have the same image.

Edit: here's a link to all the files

github.com/LyshaJaufar/CardGame.git

Answer 1

You can use:

element.onclick = functionRef

See documentation