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

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

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

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

Q&A

解決済

2回答

1982閲覧

JavaScriptを用いてオセロ(table表)を作成したい。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2017/02/13 15:30

編集2017/02/13 23:49

JavaScriptを用いてオセロゲームをWeb上で作成しております。
オセロの盤をhtml(画面)に表現したいのですが、上手くできず困っております。
htmlファイルには下記のように記述しております。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="sty"> <title>オセロ</title> <link rel="stylesheet" href="style.css"> </head> <body> <table id="board"></table> </body> <script type="text/javascript" src="index.js"></script> </html>

JavaScriptには下記のように記述しております。

var b = document.getElementById('board'); for (var i = 0; i < 8 ; i++) { var tr = document.createElement('tr'); var data = [0,0,0,0,0,0,0,0]; for (var j = 0; j < 8 ; j++) { var td = document.createElement('td'); td.className = 'cell'; td.id = 'cell' + i + j; td.onclick = clicked; tr.appendChild(td); } b.appendChild(tr); }

画面上に、縦横8マスのtableが表現されるようにしたいのですが、どのようにすればわからない状態です。アドバイス頂ければ幸いです。

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

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

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

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

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

kei344

2017/02/13 15:49

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答2

0

ベストアンサー

原則onclickの指定はaddEventListenerなどを利用してください
(tdごとに設定しなくても一発指定できるメリットもあります)
data配列が活用されていませんので、なにか意図がありそうですね
clickedもユーザー関数を別途用意してあるのでしょうか?
ロジック的にはさほど問題ないですが凡ミスが多いとハマりそうな
ソースですね

投稿2017/02/14 01:38

yambejp

総合スコア114585

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

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

turbgraphics200

2017/02/14 01:59

私は原則addEventListenerを使用するようにという意見には反対です。 addEventListenerを使用した場合、リスナーを削除するときは、removeEventListenerとの併用となりますが、きっちり管理しないとremoveEventListenerのし忘れで想定外のリスナーが走ってしまう。また、addEventListenerの2重登録で、想定では1回実行されるべきところを複数回リスナーが実行してしまうといったバグを生みます。.onclickの場合、リスナーの切り替えは、.onclickに設定しなおすだけで済みます。ですので、一つのリスナーしか想定していない場合、onclickを使用するべきと私は考えます。(jQuery等のライブラリを使用している場合は仕方ありませんが。)
yambejp

2017/02/14 02:38

基本的にはdocumentのaddEventListnerでやればいいだけのこと onclickにはメモリリークの呪いがあったのでとても使う気にはなりません (いまは改善されているのでしょうか?)
退会済みユーザー

退会済みユーザー

2017/02/14 14:45

コメントありがとうございます。addEventListenerとonclickの双方でも実現する事ができるのですね。まだ、どちらを用いたらよいという分別が付きませんが指摘事項を反映した所、問題無く表を作成することができました。今回は先にアドバイスを頂けたyambejp様をベストアンサーとさせて頂きます。
guest

0

コード自体間は間違っていません。あとはスタイルの問題かと。
検証

投稿2017/02/13 15:41

turbgraphics200

総合スコア4267

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問