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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

解決済

classを付与できない。オセロゲーム作成

kota_kota
kota_kota

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

2回答

0評価

0クリップ

235閲覧

投稿2022/07/24 08:58

編集2022/07/24 19:59

問題点

オセロゲームを作っています。
具体的に起きている現象について
盤面をクリックした後、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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロ</title> <link rel="stylesheet" href="sample.css"> </head> <body> <div class="contents"></div> <script src="sample.js"></script> </body> </html>

css

.contents { width: 500px; height: 500px; background-color: forestgreen; } .list { display: flex; align-items: center; height: 500px; } table { width: 90%; margin: 0 auto; border-collapse: collapse; border-spacing: 1px; } table tr td { height: 50px; border: 3px solid black; width: 50px; height: 50px; } .shiro-koma { background-color: white; border-radius: 50px; width: 50px; height: 50px; } .kuro-koma { background-color: black; border-radius: 50px; width: 50px; height: 50px; }

javascript

// 初期盤面 let contents = document.querySelector('.contents'); window.onload = function banmen() { let banmen = document.createElement('div'); let list_table = document.createElement('table'); banmen.classList.add('list'); contents.appendChild(banmen,contents); banmen.appendChild(list_table,banmen); for(let i=0;i<=7;i++){ let list_tr = document.createElement('tr'); list_table.appendChild(list_tr); for(let a=0;a<=7;a++){ let list_td = document.createElement('td'); list_tr.appendChild(list_td); let div = document.createElement('div'); list_td.appendChild(div); } } haichi(); click(); } // 初期配置 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"); } // クリックして自分のコマを置いた時 function click() { let list_div = document.querySelectorAll("td div"); list_div.forEach(function(item){ item.addEventListener("click", function(){ item.classList.add("shiro-koma"); }) }) } // 相手が自分のコマを置いたとき function 相手がコマを置く時() { } // 勝敗判定 function 勝敗判定() { }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kota_kota

2022/07/24 09: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"); }
m.ts10806

2022/07/24 10:05

質問は編集できます。
m.ts10806

2022/07/24 10:06

あわせてタイトルも要件を書くようにしてください。 現状のタイトルだと何が問題か分かりません(中身がないという意味)

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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