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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

2156閲覧

3行3列のマスに○×を表示させる。

Alpha

総合スコア41

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2016/06/13 07:47

以下のプログラムで全体のマスの表示の初期状態を「(スペース)」として
奇数回目のクリックではクリックされたマスは○
偶数回目のクリックではクリックされたマスは×
と表示されるようにしたいのですが、どのように処理させればよいのでしょうか。

<html> <head> <script language="JavaScript"> function ticktack(id){ if(document.getElementById(id).value.match(/^×$/)){ document.getElementById(id).value = "○"; }else{ document.getElementById(id).value = "×"; } } </script> </head> <body> <form name="tick"> <table> <tr> <td><input type="button" id="r1c1" onclick="ticktack('r1c1')"></td> <td><input type="button" id="r1c2" onclick="ticktack('r1c2')"></td> <td><input type="button" id="r1c3" onclick="ticktack('r1c3')"></td> </tr> <tr> <td><input type="button" id="r2c1" onclick="ticktack('r2c1')"></td> <td><input type="button" id="r2c2" onclick="ticktack('r2c2')"></td> <td><input type="button" id="r2c3" onclick="ticktack('r2c3')"></td> </tr> <tr> <td><input type="button" id="r3c1" onclick="ticktack('r3c1')"></td> <td><input type="button" id="r3c2" onclick="ticktack('r3c2')"></td> <td><input type="button" id="r3c3" onclick="ticktack('r3c3')"></td> </tr> </table> </body> </html>

よろしくお願いします。

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

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

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

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

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

sonor_3rd

2016/06/13 07:56

同じような質問が多く見受けられますが、学校の課題でしょうか。
Lhankor_Mhy

2016/06/13 08:27

現在の状態が、「(スペース)」の時は「○」、「○」の時は「×」、「×」の時は「○」、で同様の動作になりそうですが、なにか別の理由で偶数奇数をカウントする必要があるのでしょうか?
Lhankor_Mhy

2016/06/13 08:34

あれ? もしかして、「奇数回目」とかいうのはマスごとの回数じゃなくて全体の回数のことですか?
Alpha

2016/06/13 08:36

<Lhankonr_Mhrさん> 最終的にこのプログラムを9回目(奇数回目)のクリックでマスが全部埋まった際に終了などの処理を加えたいためです。
Alpha

2016/06/13 08:38

<Lhankonr_Mhrさん>はい。全体での回数です。説明不足ですいません。 後にクリックしたところは変更できないようにもしたいので。
guest

回答4

0

All you have to do is copy and paste the followings.

<!DOCTYPE html> <html> <head> <title>a</title> <style> button.cell { width: 48px; height: 48px; font-size: 2rem; } </style> </head> <body> <table> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> </table> <script> var clickCount; var LINES = [[0,1,2], [3,4,5], [6,7,8],[0,3,6], [1,4,7], [2,5,8],[0,4,8], [2,4,6]]; init(); function init() { clickCount = 0; Array.prototype.forEach.call(document.getElementsByClassName("cell"), function(button, index) { button.textContent = ""; button.onclick = (function(idx) { return function() { this.textContent = ++clickCount % 2 ? "○" : "×"; this.onclick = null; var lines = [LINES[Math.floor(idx / 3)], LINES[idx % 3 + 3]]; if(idx % 2 == 0) { lines.push(LINES[6 + (idx % 4 > 0 ? 1 : 0)]); if(idx == 4) lines.push(LINES[7]); } judge(lines); }; })(index); }); } function judge(lines) { var vals = Array.prototype.map.call( document.getElementsByClassName("cell"), function(button) { return button.textContent; }); var completed = false; for(var i = 0; i < lines.length; i++) { if(vals[lines[i][0]] == vals[lines[i][1]] && vals[lines[i][0]] == vals[lines[i][2]]) { completed = true; break; } } if(completed) { if(clickCount % 2) { alert("○ win."); } else { alert("× win."); } init(); } else if(clickCount == 9) { alert("Game Over"); init(); } } </script> </body> </html>

投稿2016/06/13 09:38

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

ああ、なるほど
何回押されたかカウンタをグローバルにもつと楽ですね
クリアボタンもしくは埋まったらクリアということなら
再利用できるように関数化するとよいでしょう

<script> try{ document.addEventListener ('click',function(e){myfunc(e)},true); }catch(e){ document.attachEvent('onclick',function(e){myfunc(e)}); } var cnt=0; function myfunc(e){ var t = (e.srcElement || e.target); if(t.nodeName=="INPUT" && t.type=="button"){ if(t.value==""){ cnt++; t.value=cnt%2==1?"○":"×"; if(cnt>=9){ alert("ok"); resetFunc(t); cnt=0; } } } if(t.nodeName=="INPUT" && t.type=="reset"){ cnt=0; resetFunc(t); } } function resetFunc(t){ var f=t.form; for(var i=0;i<f.length;i++){ if(f[i].type=="button") f[i].value=""; } } </script> </head> <form name="tick"> <table> <tr> <td><input type="button"></td> <td><input type="button"></td> <td><input type="button"></td> </tr> <tr> <td><input type="button"></td> <td><input type="button"></td> <td><input type="button"></td> </tr> <tr> <td><input type="button"></td> <td><input type="button"></td> <td><input type="button"></td> </tr> </table> <input type="reset" value="リセット"> </p> </form> </body>

投稿2016/06/13 08:59

yambejp

総合スコア114585

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

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

Alpha

2016/06/13 09:08

奇数回目、偶数回目の判定は ``` cnt++; t.value=cnt%2==1?"○":"×"; if(cnt>=9){ alert("ok"); resetFunc(t); cnt=0; } ``` ですよね? それと一度クリックしてしまったマスをもう一度クリックしてしまった場合にもアラート文を表示させてたいのですがどのあたりに置けばよいのでしょうか?
yambejp

2016/06/13 09:13

> もう一度クリックしてしまった場合にもアラート t.valueの判定式にelseを設定します if(t.value==""){ cnt++; t.value=cnt%2==1?"○":"×";; if(cnt>=9){ alert("ok"); resetFunc(t); cnt=0; } }else{ alert("no!"); }
Alpha

2016/06/13 09:23

この場合だと初期状態「(スペース)」をクリックした瞬間にアラートが出てしまいます。 アラートを出すタイミングは「一度クリックしてしまったマス(既に○or×になっているマス)をもう一度クリックしてしまった場合」です。
guest

0

カウンタとしてグローバル変数をひとつ置いて、それを参照したりインクリメントしたりすればいいのでは。

投稿2016/06/13 09:32

Lhankor_Mhy

総合スコア35871

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

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

0

その要素で onclick された回数を
html の input type = hidden で持っておく
それでボタンがおされた回数をhiddenタグから取得
どうでしょうかね?

JAVASCRIPT で SESSION (cookie はあまりお勧めしません) みたいな機能があれば
楽かもしれませんね。

投稿2016/06/13 08:03

YK1037

総合スコア236

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問