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

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

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

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

JavaScript

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

Q&A

解決済

2回答

1149閲覧

classNameの使い方と引数の中身について

cervoman

総合スコア2

CSS3

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

JavaScript

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

0グッド

1クリップ

投稿2023/03/18 09:04

編集2023/03/18 09:25

JavaScriptでの○×ゲームのプログラムについて質問です

ネットのブログを参考にしたのですがわからないことが2点あります。アドバイスよろしくお願いします

疑問1 classNameの使い方について

JavaScript

1td.className = `cell ${j}-${i}`;

tdのclassNameを変更しているようですが、このあとも使われることがないようです。いったいどういう目的があるのでしょうか?

疑問2 引数の中身について

JavaScript

1d.addEventListner("click", (event) => { 2let self = event.target; 3}

tdをクリックしたら引数として(event)が用意されていてアロー関数が実行されているようですが、このeventには実際にはなにが入るのでしょうか?そしてevent.targetの中身は何なのでしょうか?

JavaScript

1window.addEventListener("DOMContentLoaded", () => { 2 let board = document.getElementById("board"); 3 let xy = 3; 4 let count = 0; 5 6 for (let i = 0; i < xy; i++) { 7 let tr = document.createElement("tr"); 8 for (let j = 0; j < xy; j++) { 9 let td = document.createElement("td"); 10 const option = { once: true }; 11 12 td.className = `cell ${j}-${i}`; 13 tr.appendChild(td); 14 15 td.addEventListener( 16 "click", 17 (event) => { 18 let self = event.target; 19 let pice = count++ % 2 == 0 ? "○" : "×"; 20 self.textContent = pice; 21 if (count == xy * xy) { 22 setTimeout(() => { 23 alert("終了しました。"); 24 }, 300); 25 } 26 }, 27 option 28 ); 29 } 30 board.appendChild(tr); 31 } 32});

追記

htmlとcssを載せるのを忘れていました。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="stylesheet" href="style.css" /> 6 </head> 7 <body> 8 <div id="container"> 9 <table id="board"></table> 10 </div> 11 <script src="main.js"></script> 12 </body> 13</html>

css

1#container { 2 padding: 10px; 3 margin-right: auto; 4 margin-left: auto; 5} 6 7table { 8 border-collapse: collapse; 9 border-spacing: 0; 10 border: 1px solid #999; 11 text-align: center; 12 background-color: green; 13 max-width: 100%; 14} 15 16td { 17 width: 50px; 18 height: 50px; 19 color: #fff; 20 font-size: 25px; 21 font-weight: bold; 22 border: 1px solid #fff; 23 user-select: none; 24}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

目的

tdのclassNameを変更しているようですが、このあとも使われることがないようです。いったいどういう目的があるのでしょうか?

想像はできますが、私が書いたコードではないので「目的」はわかりません。

  • CSSのセレクタで適用している
  • 他のJavaScriptコードで利用している

制作者に確認しましょう。

event.tareget

tdをクリックしたら引数として(event)が用意されていてアロー関数が実行されているようですが、このeventには実際にはなにが入るのでしょうか?そしてevent.targetの中身は何なのでしょうか?

clickイベントハンドラにおいては、event.target は「clickされた要素ノード」を参照します。
自分で確かめる事をお勧めします。

javascript

1console.log(event.target);

投稿2023/03/18 09:15

編集2023/03/18 09:20
think49

総合スコア18172

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cervoman

2023/03/22 17:36

console.logで中身がわかりました。ありがとうございました
guest

0

ベストアンサー

tdのclassNameを変更しているようですが、このあとも使われることがないようです。

CSSサイドで定義されていませんか?

このeventには実際にはなにが入るのでしょうか?そしてevent.targetの中身は何なのでしょうか?

イベントオブジェクトが入ります。event.targetは、イベントが発生したHTML要素です。

投稿2023/03/18 09:06

編集2023/03/18 09:07
maisumakun

総合スコア145364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cervoman

2023/03/22 17:36

classNameはCSSで名前をつけていたことがわかりました。ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問