質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

setAttributeメソッドのエラーについて

Suffenjoying
Suffenjoying

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

6836閲覧

投稿2021/02/28 01:52

前提・実現したいこと

簡単な神経衰弱のアプリをjavascript で作っています。

setAttributeメソッドを使った際にエラーが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ Uncaught TypeError: Cannot read property 'setAttribute' of undefined at checkForMatch (app.js:86)

該当のソースコード

ソースコード html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Memory Game</title> </head> <body> <h3>Score:<span id="result"></span></h3> <div class="grid"> </div> <script src="app.js"></script> </body> </html>
Javascript document.addEventListener('DOMContentLoaded', () => { const cardArray = [ { name: 'apple', img: './images/apple.jpeg' }, { name: 'apple', img: './images/apple.jpeg' }, { name: 'banana', img: './images/banana.jpeg' }, { name: 'banana', img: './images/banana.jpeg' }, { name: 'kiwi', img: './images/kiwi.jpeg' }, { name: 'kiwi', img: './images/kiwi.jpeg' }, { name: 'strawberry', img: './images/strawberry.jpeg' }, { name: 'strawberry', img: './images/strawberry.jpeg' }, { name: 'watermelon', img: './images/watermelon.jpeg' }, { name: 'watermelon', img: './images/watermelon.jpeg' }, { name: 'orange', img: './images/orange.jpeg' }, { name: 'orange', img: './images/orange.jpeg' }, ] cardArray.sort(() => 0.5 - Math.random()) const grid = document.querySelector('.grid') const resultDisplay = document.getElementById('result') var cardChosen = [] var cardChosenID = [] var cardsWon = [] function createBoard() { for (let i = 0; i<cardArray.length; i++) { var card = document.createElement('img') card.setAttribute('src', 'images/blank.jpeg') card.setAttribute('data-id', i) card.addEventListener('click', flipCard) grid.appendChild(card) } } //check for matches function checkForMatch () { var cards = document.querySelector('img') const optionOneId = cardChosenID[0] const optionTwoId = cardChosenID[1] if (cardChosen[0] === cardChosen[1]) { alert('You found a match') cards[optionOneId].setAttribute('src', './images/clown.jpg') cards[optionTwoId].setAttribute('src', './images/clown.jpg') cardsWon.push(cardChosen) 85 } else { 86 cards[optionOneId].setAttribute('src', 'images/blank.jpeg') 87 cards[optionTwoId].setAttribute('src', 'images/blank.jpeg') alert('Sorry, try again!') } cardChosen = [] cardChosenID = [] resultDisplay.textContent = cardsWon.length if (cardsWon.length === cardArray.length/2) { resultDisplay.textContent = 'Congratulations! You found them all!' } } //flip your card function flipCard() { var cardId = this.getAttribute('data-id') cardChosen.push(cardArray[cardId].name) cardChosenID.push(cardId) this.setAttribute('src', cardArray[cardId].img) if (cardChosen.length === 2){ setTimeout(checkForMatch, 500) } } createBoard() })

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

cardsをquerySelectorで取っているので、ここで取れるのは1エレメントだけです。

querySelectorAllが適切なのではないでしょうか。

投稿2021/02/28 03:12

maisumakun

総合スコア141476

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Suffenjoying

2021/02/28 09:17

ALLに修正してエラー解決できました! ありがとうございました!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。