如何在javascript内存游戏中翻转卡片

我是javascript中的乞丐，当我点击一张卡片时，我试图翻转它。调用函数flipcard时，我会在html中传递cardid。但我得到一个错误，说不能设置属性src为null

var faces = []; //array to store card images
     faces[0] = 'images/king-of-diamonds.png';
     faces[1] = 'images/king-of-hearts.png';
     faces[2] = 'images/queen-of-diamonds.png';
     faces[3] = 'images/queen-of-hearts.png';

var cardsInPlay = [];

var checkForMatch = function() {
    if (cardsInPlay[0] === cardsInPlay[1]) {
          console.log("You found a match!");
        } else {
            console.log("Sorry, try again.");
        }
}

var flipCard = function(cardId) {

    document.getElementById('q').src=faces[cardId]

    checkForMatch();
}






 Html



  <div>
            <img onclick="flipCard(1)" id="image1" src="images/back.png" alt="Queen of Diamonds">
            <img onclick="flipCard(2)" id="image2" src="images/back.png" alt="Queen of Hearts">
            <img id="image3" src="images/back.png" alt="King of Diamonds">
            <img id="image4" src="images/back.png" alt="King of Hearts">
        </div>

var faces=[]//用于存储卡图像的阵列
faces[0]=“images/king of diamonds.png”；
faces[1]=“images/king of hearts.png”；
faces[2]=“images/queen of diamonds.png”；
faces[3]=“images/queen of hearts.png”；
var cardsInPlay=[]；
var checkForMatch=函数（）{
if（cardsInPlay[0]==cardsInPlay[1]）{
log（“您找到了匹配项！”）；
}否则{
log（“对不起，再试一次。”）；
}
}
var flipCard=功能（cardId）{
document.getElementById（'q'）.src=faces[cardId]
checkForMatch（）；
}
Html

在代码中查找id=q是什么

document.getElementById('q').src=faces[cardId]

---

您的HTML中没有这样一个id，这就是为什么您的src为null的原因

document.getElementById('q').src=faces[cardId]

---

您的HTML中没有这样的id，这就是为什么您的src为null的原因

omg非常感谢！我太傻了，没有看到这个很小的错误！！小错误通常会使好的程序崩溃。下次你自己会看到的！现在我可以翻转一张卡片了，我如何让它将其他卡片翻转到valuedocument.getElementById（name）.src=faces[cardId]omg，非常感谢！我太傻了，没有看到这个很小的错误！！小错误通常会使好的程序崩溃。下次你自己会看到的！现在我可以翻转一张卡了，我如何让它将其他卡翻转到valuedocument.getElementById（name.src=faces[cardId]