javascriptでマルバツゲームを作っています

Question

###前提・実現したいこと
javascriptでマルバツゲームを作っているのですが、ボタンを9個使って、初期値はスペースで何も表示せず、1回クリックで〇を表示させ、2回目のクリックで×が表示するようになっています。3回目にはアラートがでて、そこには置けないというメッセージを表示させています。
そこでですが、今まではボタンを9個同じものを並べていたのですが、後々の課題で9個別々に識別できるようにする必要があり変数宣言でnewArray(9)を宣言し、「i」で0～8の数字が入るようにしたのですが、どうにもうまくいきません。

###発生している問題・エラーメッセージ

2-1.html:15 Uncaught TypeError: Cannot set property 'value' of undefined

###該当のソースコード

 <script language="JavaScript">
 var check=0;
 var i = new Array(9);
 //初期化処理（ボタン表示の初期化）
 function init() {
	document.tick.elements[i].value = "  ";
 }
 
 function ticktack(botan){
 
 if (tick.elements[i].value == "  ") {
	if (tick.elements[i].value == "○") {
		tick.elements[i].value = "×";
	} 
	else {
		tick.elements[i].value = "○";
	}
 }
 else if (tick.elements[i].value == "○") {
	if (tick.elements[i].value == "○") {
		tick.elements[i].value = "×";
	} 
	else {
		tick.elements[i].value = "○";
	}
 }
 else{
 alert("そのマスはすでに選ばれています。");
 }
} 
 </script>

###試したこと
初期化処理をいろいろ変えてみたり、forで回してみたのですが何時間かけても解決できなかったので質問させていただきました。

Comments

[takyafumin]

「後々の課題で9個別々に識別できるようにする必要があり」とありますが、学校か研修の課題なのでしょうか？
回答すべきQAであるか判断したいため、教えてください。

[退会済みユーザー]

はいそうです。この後もまだまだ続きがあり、初めの段階であるため、ヒントだけでもいただけたらと思い質問させていただきました。

[takyafumin]

質問主旨分かりました。回答ありがとうございます。

Answer 1

var i = new Array(9);
と書いても0～8の値は作成されませんよ。

document.tick.elements[i].value
と書くとelementsの要素の指定に配列iを丸ごと渡すことになりますよ。

まずは本課題をクリアする前に、「配列」について学んだ方が良いと思います。

Comments

[退会済みユーザー]

とても良いヒントをいただけたので、時間をかけて少しずつ考えていこうと思います。ご回答ありがとうございました。

Answer 2

一般的な3x3のマスの○×ゲームだとすれば、親要素で click イベントハンドラを監視し、event.target で対象の要素ノードを取得するとスマートに書けると思います。

• バブリング dom - Google 検索

また、個人的には任意の数のマス目(4x4、5x5等)の table 要素を動的に生成出来るようにすると更に良いと思います。
※実装例: createElement, createTextNode, appendChild, insertCell 等

• Interface HTMLTableRowElement

Re: yuuki2016 さん

Comments

[退会済みユーザー]

ご回答ありがとうございます。参考にさせていただきます。

Answer 3

同じ学校の人
この方が同じ宿題をまるまるここで質問して全く自分で考えたり調べたりすることなくソースはほぼできています。まる写ししてください。

Comments

[toshi_yama]

ソースはほぼできている。自分で考えて作ったのですから考えてないとはいえないです。

[Zuishin]

そうですか。それは彼の質問の履歴を各自ご覧になって判断されたらよろしいでしょう。

[masaya_ohashi]

私は「１ステップ進むごとに他人に聞いて、他人に教えられた通りにコピペ」することで完成したものを考えたとは言わないと思います。

[toshi_yama]

申し訳ございません。コメントが浅はかでした。

>それは彼の質問の履歴を各自ご覧になって判断されたらよろしいでしょう。
→そうですね。失礼しました。
>私は「１ステップ進むごとに他人に聞いて、他人に教えられた通りにコピペ」することで完成したものを考えたとは言わないと思います。
→確かにその通りです。
私も2人の課題をみて、先生に聞けとは思いました。

[退会済みユーザー]

私の投稿が原因で、ご迷惑をおかけしてしまい申し訳ありません。基礎から勉強をし直します。ご回答ありがとうございました。