我有一个带有存储卡游戏卡片的Html页面，该用户应该匹配两张卡片并赢得卡片中提到的优惠。优惠适用于在线杂货店购物应用程序。翻转卡时出现以下错误。
<div class="deck" id="iPad_Card_layout">
<img id="shelfs" src="shelfs.png" srcset="shelfs.png 1x, [email protected] 2x">
<div id="Repeat_Grid_5">
<div id="Repeat_Grid_5_0" class="offers"> <!--onclick="application.goToTargetView(event)"-->
<div id="card" class="card" data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img class="match-value" id="softdrinks" src="softdrinks.png" srcset="softdrinks.png 1x, [email protected] 2x">
<div id="ID25__OFF_on__Soft_Drinks">
<span>25 % OFF on <br/>Soft Drinks</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_1" class="offers">
<div id="card" class="card "data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="vegetables" class="match-value" src="vegetables.png" srcset="vegetables.png 1x, [email protected] 2x">
<div id="ID10__OFF_on__fruits_veg">
<span>10 % OFF on <br/>Fruits <br>&<br> Vegetables</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_2" class="offers">
<div id="card" class="card" data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="softdrinks" class="match-value" src="softdrinks.png" srcset="softdrinks.png 1x, [email protected] 2x">
<div id="ID25__OFF_on__Soft_Drinks">
<span>25 % OFF on <br/>Soft Drinks</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_3" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="vegetables" class="match-value" src="vegetables.png" srcset="vegetables.png 1x, [email protected] 2x">
<div id="ID10__OFF_on__fruits_veg">
<span>10 % OFF on <br/>Fruits <br>&<br> Vegetables</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_4" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="dairy_items" class="match-value" src="dairy_items.png" srcset="dairy_items.png 1x, [email protected] 2x">
<div id="ID15__OFF_on__Dairy_items">
<span>15 % OFF on <br/>Dairy Products</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_5" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="dairy_items" class="match-value" src="dairy_items.png" srcset="dairy_items.png 1x, [email protected] 2x">
<div id="ID15__OFF_on__Dairy_items">
<span>15 % OFF on <br/>Dairy Products</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_6" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="pringles_offer" class="match-value" src="pringles_offer.png" srcset="pringles_offer.png 1x, [email protected] 2x">
<div id="IDBuy_one_get_free">
<span>Buy any can of <br/>Pringles and get <br>another for <b>FREE!</b></span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_7" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="pringles_offer" class="match-value" src="pringles_offer.png" srcset="pringles_offer.png 1x, [email protected] 2x">
<div id="IDBuy_one_get_free">
<span>Buy any can of <br/>Pringles and get <br>another for <b>FREE!</b></span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_8" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="oreo" class="match-value" src="oreo_offer.png" srcset="oreo_offer.png 1x, [email protected] 2x">
<div id="IDOreo_offer">
<span>Oreo Party Pack<br/>for only <br/>Rs.1500.00</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_9" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="oreo" class="match-value" src="oreo_offer.png" srcset="oreo_offer.png 1x, [email protected] 2x">
<div id="IDOreo_offer">
<span>Oreo Party Pack<br/>for only <br/>Rs.1500.00</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_10" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="dilmah" class="match-value" src="dilmah_offer.png" srcset="dilmah_offer.png 1x, [email protected] 2x">
<div id="IDdilamah_offer">
<span>Get a Free Pack <br>of Dilmah tea <br>of your choice.</span>
</div>
</div>
</div>
</div>
<div id="Repeat_Grid_5_11" class="offers">
<div id="card" class="card " data-framework="matchcard">
<div class="card-back card-face">
<svg class="Rectangle_13">
<rect id="Rectangle_13" rx="8" ry="8" x="0" y="0" width="141" height="172">
</rect>
</svg>
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="32" ry="32" x="0" y="0" width="64" height="64">
</rect>
</svg>
<div id="logo" class="logo">
<img id="shopping-cart" src="shopping-cart.png" srcset="shopping-cart.png 1x, [email protected] 2x">
<div id="Joeys">
<span>Joey’s</span>
</div>
</div>
</div>
<div id="win_card" class=" card-front card-face">
<svg class="Rectangle_31">
<rect id="Rectangle_31" rx="8" ry="8" x="0" y="0" width="140" height="171">
</rect>
</svg>
<img id="dilmah" class="match-value" src="dilmah_offer.png" srcset="dilmah_offer.png 1x, [email protected] 2x">
<div id="IDdilamah_offer">
<span>Get a Free Pack <br>of Dilmah tea <br>of your choice.</span>
</div>
</div>
</div>
</div>
</div>
script.js文件中包含翻转卡片并查看它们是否匹配的脚本
class AudioController{
constructor() {
this.flipSound = new Audio('Assets/audio/flip.wav');
this.matchSound = new Audio('Assets/audio/match.wav');
}
flip(){
this.flipSound.play();
}
match(){
this.matchSound.play();
}
}
let hasFlippedCard = false;
let firstCard, secondCard;
class MixORMatch{
constructor(totalChances,cards) {
this.cardsArray = cards;
this.totalChances = totalChances;
this.chancesRemaining = totalChances;
this.chances = document.getElementById('chances-remaining');
this.audioController = new AudioController();
//shuffle cards
this.shuffleCards();
//start game
this.cardToCheck = null;
this.totalClicks = 0;
this.chancesRemaining = this.totalChances;
this.matchedCards = [];
}
startGame(){
this.cardToCheck = null;
this.totalClicks = 0;
this.chancesRemaining = this.totalChances;
this.matchedCards = [];
}
flipCard(card) {
if(this.canFlipCard(card)){
this.audioController.flip();
this.totalClicks++;
card.classList.add('visible');
//first click
hasFlippedCard = true;
firstCard = this;
if (this.canFlipCard(card)){
this.checkForCardMatch(card);
}else{
this.cardToCheck = card;
}
}else{
//second click
hasFlippedCard = false;
secondCard = this;
console.log("flipped")
}
}
hideCards() {
this.cardsArray.forEach(card=> {
card.classList.remove('visible');
card.classList.remove('matched');
});
}
checkForCardMatch(card) {
if (this.getCardType(card)===this.getCardType(this.cardToCheck)){
this.cardMatch(card,this.cardToCheck);
}else{
this.cardMisMatch(card,this.cardToCheck);
}
this.cardToCheck = null;
}
cardMatch(card1,card2){
this.matchedCards.push(card1);
this.matchedCards.push(card2);
card1.classList.add('matched');
card2.classList.add('matched');
this.audioController.match();
if(this.matchedCards.length === this.cardsArray.length){
console.log("win");
}
}
cardMisMatch(card1,card2){
setTimeout(()=>{
card1.classList.remove('visible');
card2.classList.remove('visible');
},1000);
}
shuffleCards(cardsArray){
let cardscount = cardsArray,length;
for(let i =cardscount; i>0; i--){
let randIndex = Math.floor(Math.random() * (i+1));
cardsArray[randIndex].style.order = i;
cardsArray[i].style.order = randIndex;
}
}
getCardType(card){
return card.getElementsByClassName('match-value')[0].src;
}
canFlipCard(card){
return true;//(!this.busy && !this.matchedCards.includes(card) && card!== this.cardToCheck);
}
}
function ready(){
let cardDeck = Array.from(document.getElementsByClassName('deck'));
let cards = Array.from(document.getElementsByClassName('card'));
let game = new MixORMatch(3,cards);
/* overlays.forEach(overlay => {
overlay.addEventListener('click',()=>{
overlay.classList.remove('visible');
//game.startGame();
});
});*/
cards.forEach(card =>{
card.addEventListener('click',()=>{
//flipping card game
game.startGame();
game.flipCard(card);
});
});
}
if(document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded',ready);
}else{
ready();
}
我不确定为什么会收到此错误，我已将匹配类别的卡片定义为图像的“匹配值”，我获取了图像src并检查它是否与卡片用户先前翻转过的卡片相匹配。但是，当我翻转两张卡时，都会出现上述错误。在“ getCardType”中的脚本中。
Uncaught TypeError: Cannot read property 'getElementsByClassName' of null
问题出在您的getCardType()职能上。你写了：
getCardType(card) {
return card.getElementsByClassName('match-value')[0].src;
}
它应该是：
getCardType(card){
return document.getElementsByClassName('match-value')[0].src;
// ^--- you wrote 'card' here
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句