配列の要素を取得する際のUndefinedについて

前提・実現したいこと

簡単な機能の五目並べを作っています。
同じ駒が5個並んだら、勝敗判定をしたいです。

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

エラーメッセージ
consolを確認すると、クリックしたマスだけ定義されていて、
そのほかはundefinedとなってしまいます。

なぜ配列の各配列の先頭のidの要素だけは取得できて、他の4つはundefinedとなってしまうのでしょうか？

該当するコードは63行目から、76行目ほどまでになります。

上手く5つ並んだidが取得できれば、everyメソッドで勝敗判定しようと考えています。

該当のソースコード

ソースコード
const grid = document.querySelector('.grid')
const width = 15
const squares = []

let currentPlayer = 0

function createBoard () {
    for (let i = 0; i < width * width - 1; i++) {
        const div = document.createElement('div')
        div.classList.add('square')
        grid.appendChild(div)
        squares.push(div)      
    }

    for(let i = 0; i < squares.length; i++) {
        squares[i].setAttribute('data-id', i);
    }
}

document.addEventListener('click', e => {
    id = e.target.dataset.id
    if(currentPlayer === 0) {
        blackTurn(id)
    } else if (currentPlayer === 1) {
        whiteTurn(id)
    }
})

function blackTurn(id) {
    if(squares[id].firstChild) {
        if(!squares[id].firstChild.classList.contains('black') && !squares[id].firstChild.classList.contains('white'))  
        alert('Already taken!')

    } else putBlack(id)
}

function putBlack(id) {
    const div = document.createElement('div')
    div.classList.add('black')
    squares[id].appendChild(div)
    currentPlayer = 1
    checkForWin(id)
}

function whiteTurn(id) {
    if(squares[id].firstChild) {
        if(!squares[id].firstChild.classList.contains('black') && !squares[id].firstChild.classList.contains('white')) 
        alert('Already taken!')

    } else putWhite(id)
}

function putWhite(id) {
    const div = document.createElement('div')
    div.classList.add('white')
    squares[id].appendChild(div)
    currentPlayer = 0
    checkForWin(id)
}


//check for win
63 function checkForWin (id) {
64    const winCombinations = [
65        [id, id + 1, id + 2, id + 3, id + 4],
66        [id, id - 1, id - 2, id - 3, id - 4],
67        [id, id + 16, id + 32, id + 48, id + 64],
68        [id, id - 16, id - 32, id - 48, id - 64],
69        [id, id - 15, id - 30, id - 45, id - 60],
70        [id, id - 17, id - 34, id - 51, id - 68],
71        [id, id + 15, id + 30, id + 45, id + 60],
72        [id, id + 17, id + 34, id + 51, id + 68]       
73    ]
74    winCombinations.forEach(comb => {
75        for(let i = 0; i < comb.length; i++) {
76            console.log(squares[comb[i]]);
77        }
78    })
    
}


//display the winner

document.addEventListener('DOMContentLoaded', createBoard)

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Gomoku</title>
8    <link rel="stylesheet" href="styles.css">
9    <script src="app.js" defer></script>
10</head>
11<body>
12    <div class="grid"></div>
13</body>
14</html>

y_waiwai

2021/03/21 10:52

で、しつもんはなんでしょうか

Suffenjoying

2021/03/21 11:01

訂正します????‍♂️

m.ts10806

2021/03/21 11:01

タイトルと内容が結びつかない

Suffenjoying

2021/03/21 11:06

訂正しました????‍♂️

行動規範の内容に同意します

回答1件

ベストアンサー

createBoard()によると、

squares は HTMLDivElement の配列
その data-id 属性は 0〜15x15-1 の数値を文字列化したもの (属性には文字列しか入れられないため)

blackTurn() putBlack() whiteTurn() putWhite() checkForWin() の各関数をざっと見ると、id は数値という前提のようですが、クリックイベントハンドラのコードでは dataset.id が文字列のため id は文字列になっています。checkForWin() で文字列変数 id に id + 1 とすると文字列 '1' が右に追加されるので、期待通りには動かないでしょう。

ですので、クリックイベントハンドラで

js
1    let id = Number(e.target.dataset.id);

で動くのではないでしょうか。

投稿2021/03/21 23:45

編集2021/03/21 23:47

int32_t

総合スコア20987

Suffenjoying

2021/03/22 01:03

data-idが数値ではなく、文字列になっているということを知りませんでした、、、 Numberメソッドで解決しました。本当にありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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