Q&A
「うまくいかない」などで他者に伝わる情報量はゼロなので
具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips34
問題点
オセロゲームを作っています。
具体的に起きている現象について
盤面をクリックした後、div要素に、class='shiro-koma'を付与できない。
エラーメッセージはありません。
気になる点について
下記の初期配置で設定した盤面の箇所はなぜか、 class='shiro-koma'を付与できる。
// 初期配置 function haichi() { let list_div = document.querySelectorAll("td div"); list_div[35].classList.add("shiro-koma"); list_div[28].classList.add("shiro-koma"); list_div[36].classList.add("kuro-koma"); list_div[27].classList.add("kuro-koma"); }
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>オセロ</title> 7 <link rel="stylesheet" href="sample.css"> 8</head> 9<body> 10 <div class="contents"></div> 11 <script src="sample.js"></script> 12</body> 13</html>
css
1 2.contents { 3 width: 500px; 4 height: 500px; 5 background-color: forestgreen; 6} 7 8.list { 9 display: flex; 10 align-items: center; 11 height: 500px; 12} 13 14table { 15 width: 90%; 16 margin: 0 auto; 17 border-collapse: collapse; 18 border-spacing: 1px; 19} 20 21table tr td { 22 height: 50px; 23 border: 3px solid black; 24 width: 50px; 25 height: 50px; 26} 27 28.shiro-koma { 29 background-color: white; 30 border-radius: 50px; 31 width: 50px; 32 height: 50px; 33} 34 35.kuro-koma { 36 background-color: black; 37 border-radius: 50px; 38 width: 50px; 39 height: 50px; 40} 41
javascript
1 2// 初期盤面 3 4let contents = document.querySelector('.contents'); 5 6window.onload = function banmen() { 7 let banmen = document.createElement('div'); 8 let list_table = document.createElement('table'); 9 10 11 banmen.classList.add('list'); 12 contents.appendChild(banmen,contents); 13 banmen.appendChild(list_table,banmen); 14 15 for(let i=0;i<=7;i++){ 16 let list_tr = document.createElement('tr'); 17 list_table.appendChild(list_tr); 18 19 for(let a=0;a<=7;a++){ 20 let list_td = document.createElement('td'); 21 list_tr.appendChild(list_td); 22 let div = document.createElement('div'); 23 list_td.appendChild(div); 24 } 25 } 26 haichi(); 27 click(); 28} 29 30// 初期配置 31function haichi() { 32 let list_div = document.querySelectorAll("td div"); 33 list_div[35].classList.add("shiro-koma"); 34 list_div[28].classList.add("shiro-koma"); 35 list_div[36].classList.add("kuro-koma"); 36 list_div[27].classList.add("kuro-koma"); 37} 38 39// クリックして自分のコマを置いた時 40function click() { 41 let list_div = document.querySelectorAll("td div"); 42 list_div.forEach(function(item){ 43 item.addEventListener("click", function(){ 44 item.classList.add("shiro-koma"); 45 }) 46 }) 47} 48 49// 相手が自分のコマを置いたとき 50function 相手がコマを置く時() { 51 52} 53 54// 勝敗判定 55function 勝敗判定() { 56 57} 58
承知しました。
具体的に起きている現象について
盤面をクリックした後、div要素に、class='shiro-koma'を付与できない。
エラーメッセージはありません。
気になる点について
下記の初期配置で設定した盤面の箇所はなぜか、
class='shiro-koma'を付与できる。
// 初期配置
function haichi() {
let list_div = document.querySelectorAll("td div");
list_div[35].classList.add("shiro-koma");
list_div[28].classList.add("shiro-koma");
list_div[36].classList.add("kuro-koma");
list_div[27].classList.add("kuro-koma");
}
質問は編集できます。
あわせてタイトルも要件を書くようにしてください。
現状のタイトルだと何が問題か分かりません（中身がないという意味）
回答2件
1
ベストアンサー
item.addEventListener("click", function(){ item.classList.add("shiro-koma"); })
このfunctionの中にconsole.log()など入れてみるとわかると思うのですが、
そもそもitemに対するclickイベントが発火していません。
それはなぜか。
上記のようにheightが0だからです。
これではクリックできません。
table tr td div
に対してwidth,heightを明示してあげると（とりあえず100%）
クリックイベントが発生し、白丸がつきました。
投稿2022/07/24 10:18
総合スコア80695
あなたの回答
tips
プレビュー
