Javascript初心者です助言おねがいします。
オセロを作成しています。
盤面の上にaからhも文字を表示して盤面の左に１から８の文字を表示させたいのですが、どうもうまくいきません。どうすればよいでしょうか。
Javascript
// ボードの上に a から h までの文字を表示する
const letters = document.createElement("div");
letters.classList.add("letters");
for (let i = 0; i < 8; i++) {
const letter = document.createElement("div");
letter.classList.add("letter");
letter.textContent = String.fromCharCode(97 + i);
letters.appendChild(letter);
}
// ボードの左に 1 から 8 までの数字を表示する
const numbers = document.createElement("div");
numbers.classList.add("numbers");
for (let i = 1; i <= 8; i++) {
const number = document.createElement("div");
number.classList.add("number");
number.textContent = i;
numbers.appendChild(number);
}
board.appendChild(numbers);
// 盤面を作成
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.setAttribute("data-row", row);
cell.setAttribute("data-col", col);
board.appendChild(cell);
cells[`${row}-${col}`] = cell;
}
board.appendChild(letters);
}
css
.letters {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.letter {
width: 12.5%;
text-align: center;
}
.numbers {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 8px;
}
.number {
height: 12.5%;
text-align: center;
}
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
