五目並べ、駒の生成の方法

前提・実現したいこと

簡単な機能だけの五目並べを作っています。
クリックされたところに駒を置きたいのですが、
駒がボードに反映されません。

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

ボードのマスをクリックしても黒い駒が現れません。

該当のソースコード

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">
    <title>Gomoku</title>
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
</head>
<body>
    <div class="grid"></div>
</body>
</html>

ソースコード
javascript

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')
        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) {
    const span = document.createElement('span')
    span.classList.add('black')
    squares[id].appendChild(span)
}

function whiteTurn() {

}

document.addEventListener('DOMContentLoaded', createBoard)

css
* {
  box-sizing: border-box;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  height: 510px;
  width: 580px;
  background-color: rgb(250, 224, 202);
  margin: 2rem 0 0 2rem;
  border: 10px solid brown;
  z-index: 1;
}

.grid div {
  height: 35px;
  width: 35px;
  background-color: transparent;
  border: 1px solid black;
  z-index: 5;
}

.black {
  height: 10px;
  width: 10px;
  color: black;
  border-radius: 50%;
  z-index: 10;
}

試したこと

cssに問題があるのかと思い、z-indexなどを指定しましたが、それでも
反映されませんでした。

Daregada

2021/03/21 02:30

「該当のソースコード」に、HTMLファイルも(省略せずに)記載してください。

Suffenjoying

2021/03/21 02:51

失礼いたしました。

babu_babu_baboo

2021/03/21 03:37

squares[id] に append する要素はブロック要素にする

m.ts10806

2021/03/21 04:03

css ソースコード javascript html これら全てコード内に存在しないのでしたら除去してください。言語名を伝えたいのでしたらコードブロックの冒頭に書くことで反映されます。 ```js コード ``` ```css ここにコード ``` ```html ここにコード ``` 見てるのは赤の他人なので、「そんなのあり得ないだろう」と主張されても過去に稀に本当にそうなってた人がいます。回答者の負荷（要は余計な詮索やツッコミ）を減らすための配慮はお願いしたく。

Suffenjoying

2021/03/21 06:35

はい！次から気を付けます！