Uncaught TypeError: Невозможно прочитать свойство 'getAttribute' из неопределенного - PullRequest
Новая
       10

Uncaught TypeError: Невозможно прочитать свойство 'getAttribute' из неопределенного

0 голосов
/ 30 сентября 2018

Для начала я просмотрел другие посты с той же ошибкой, и у них не было ответа на мой специфический вопрос: почему эта проклятая ошибка появляется для me * 1004?* ???

Код должен создавать кучу карт для игры на память.Когда вы нажимаете на карточки, они должны «перевернуться», переходя от одного изображения к другому.Я могу создать карты с помощью createBoard ();однако кроме этого ничего не происходит, кроме как в консоли написано «Uncaught TypeError: невозможно прочитать свойство getAttribute из undefined».Как это исправить?Я так долго обдумывал это, и я в полном замешательстве. 

// 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();

Вот сопровождающий 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>

Пожалуйста, сенсей, учите меня.

обновление: чтобы ответить на любые вопросы о моих намерениях, я добавил комментарии и HTML

1 Ответ

0 голосов
/ 30 сентября 2018

Ваш обработчик события flipCard получит объект Event, в случае события щелчка - объект MouseEvent.MouseEvent объект будет содержать свойство currentTarget, которое будет ссылаться на элемент, к которому вы прикрепили свой обработчик событий.

Попробуйте это ... 

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();
}

У вас также будетtarget свойство объекта Event, это относится к элементу, который вызвал событие, принимая во внимание всплытие событий (https://developer.mozilla.org/en-US/docs/Web/API/Event/target).

ПРИМЕЧАНИЕ Как указано @RobG youдействительно нужно подумать, когда использовать функцию стрелки.

...