[英]Uncaught TypeError: Cannot read property 'getAttribute' of undefined
To start, I looked at other posts with the same error and they didn't have an answer to my specific question which is: why is this accursed error showing up for me ??? 首先,我查看了其他具有相同错误的帖子,而他们对我的具体问题没有答案:为什么这个错误的错误会为我显示?
The code is supposed to instantiate a bunch of cards for a memory game. 该代码应实例化用于记忆游戏的一堆卡片。 When you click the cards, they should 'flip over' by changing from one image to another. 当您单击卡片时,它们应该通过从一张图像变为另一张图像来“翻转”。 I can instantiate the cards using 'createBoard();' 我可以使用'createBoard();'实例化卡片 however beyond that nothing happens, except in the console it says "Uncaught TypeError: cannot read property 'getAttribute' of undefined." 但是除此之外,什么都没有发生,除了在控制台中显示“ Uncaught TypeError:无法读取未定义的属性'getAttribute'”。 How do I fix this? 我该如何解决? I've been going over it for so long and I'm completely stumped. 我已经花了很长时间了,我完全陷入了困境。
// stores cards available for memory game
let cards = [
{
rank: 'queen',
suit: 'hearts',
cardImage: 'images/queen-of-hearts.png'
},
{
rank: 'queen',
suit: 'diamonds',
cardImage: 'images/queen-of-diamonds.png'
},
{
rank: 'king',
suit: 'hearts',
cardImage: 'images/king-of-hearts.png'
},
{
rank: 'king',
suit: 'diamonds',
cardImage: 'images/king-of-diamonds.png'
}
];
// stores flipped cards
let cardsInPlay = [];
/*
if two cards have been flipped
checks for match, alerts to success/failure
*/
let checkForMatch = () => {
if (cardsInPlay.length === 2) {
alert((cardsInPlay[0] === cardsInPlay[1]) ?
'You found a match!' :
'Sorry, try again.');
}
}
/*
retrieves the card id from the element that was clicked
adds the card to cardsInPlay
changes the imagesrc of the element
calls checkForMatch()
*/
let flipCard = () => {
let cardId = document.this.getAttribute('data-id');
cardsInPlay.push(cards[cardId].rank);
document.this.setAttribute('src', cards[cardId].cardImage);
checkForMatch();
}
/*
appends 4 imgs with sequential IDs
to the div with id='game-board'
each img listens for click, which calls flipCard()
*/
let createBoard = () => {
for (let i = 0; i < cards.length; i++) {
var cardElement = document.createElement('img');
cardElement.setAttribute('src', 'images/back.png');
cardElement.setAttribute('data-id', i);
cardElement.addEventListener('click', flipCard);
document.getElementById('game-board').appendChild(cardElement);
}
}
// instantiate gameboard
createBoard();
Here is the accompanying HTML: 这是随附的HTML:
<!DOCTYPE html>
<html>
<head>
<title>Memory Card Game</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Raleway:400,500,600,700" rel="stylesheet">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>MEMORY GAME</h1>
</header>
<nav>
<a class="nav" href="#">RULES</a> |
<a class="nav" href="#">GAME</a>
</nav>
<main>
<h2>RULES</h2>
<p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso, or simply Pairs, is a card game in which all of the cards are laid face down on a surface and two cards are flipped up over each turn. The object of the game is to turn over pairs of matching cards</p>
<div id="game-board" class="board clearfix"></div>
</main>
<footer class="clearfix">
<p class="copyright">Copyright 2017</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
Please, senseis, school me. 老师,请教我。
update: to answer any questions about my intent I have added comments and html 更新:为回答有关我的意图的任何问题,我添加了评论和html
Your event handler flipCard
will receive an Event
object, in the case of a click event, a MouseEvent
object. 您的事件处理程序flipCard
将收到一个Event
对象,如果发生click事件,则将收到一个MouseEvent
对象。 The MouseEvent
object will contain the property currentTarget
which will refer to the element you attached your event handler to. MouseEvent
对象将包含属性currentTarget
,该属性将引用事件处理程序附加到的元素。
Try this... 尝试这个...
let flipcard = (event) => {
let card = event.currentTarget;
let cardId = card.getAttribute('data-id');
cardsInPlay.push(cards[cardId].rank);
card.setAttribute('src', cards[cardId].cardImage);
checkForMatch();
}
You will also have a target
property on an Event
object, this refers to the element that triggered the event, taking event bubbling into account ( https://developer.mozilla.org/en-US/docs/Web/API/Event/target ). 您还将在Event
对象上具有target
属性,这是指触发事件的元素,同时考虑到事件冒泡( https://developer.mozilla.org/zh-CN/docs/Web/API/Event/目标 )。
NOTE As pointed out by @RobG you should really consider when to use an arrow function. 注意正如@RobG指出的那样,您应该真正考虑何时使用箭头功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.