Leon Bogod Leon Bogod -4 years ago 69
Javascript Question

how to flip card in javascript memory game

im a begginer in javascript and im trying to flip a card when i click on it. im passing the cardid in the html when calling the function flipcard. but im getting an error saying cannot set property src of 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>

Answer Source

Look in your code what is id=q?

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

you do not have such an id in your HTML, that is why your src is null

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download