３行３列のマスに○×に切り替わる処理を与える

Question

以下のプログラムで３行３列のマスに初期状態が空白(スペース)でクリックすると○×に切り替わるようにしたいのですがマスしか表示されず、クリックしても切り替わらなくなってしまいました。
どこがおかしいのでしょう。

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

  <input type="button" name="r1c1" onclick="ticktack()">
  </table>

よろしくお願いします

Answer 1

これってコードすべてですか？
処理しているのが r1c1 しか見ていないので、どのみちうまく動いていないのかな、と思いました。
もし可能であればjsdo.itなどを利用して実際に問題の出ているコードをシェアすると明確な答えが得られると思います。

ちなみにですが、現状の実装の方向性にも問題がありそうです。
まず内部的に（配列で）3x3のデータを保持して、それを表示するだけのものとしてテーブルを用意したほうがいいかなと思いました。

そのうえで、セルがクリックされたタイミングで「どのセルがクリックされたか」を調査し、該当のデータを更新、それを再びテーブルに反映しなおす、みたいなほうがいいかなと思います。

Comments

[Alpha]

修正して
```
</script>
<form name="tick">
<table>
<tr>
<td> <input type="button" name="r1c1" onclick="ticktack()"></td>
<td> <input type="button" name="r1c2" onclick="ticktack()"></td>
<td> <input type="button" name="r1c3" onclick="ticktack()"></td>
</tr>
<tr>
<td> <input type="button" name="r2c1" onclick="ticktack()"></td>
<td> <input type="button" name="r2c2" onclick="ticktack()"></td>
<td> <input type="button" name="r2c3" onclick="ticktack()"></td>
</tr>
<tr>
<td> <input type="button" name="r3c1" onclick="ticktack()"></td>
<td> <input type="button" name="r3c2" onclick="ticktack()"></td>
<td> <input type="button" name="r3c3" onclick="ticktack()"></td>
</tr>
</table>
```
にするとr1c1にしか処理が行われません。
```
function init(){
document.tick.r1c1.value =" ";
}
function ticktack(){
if(document.tick.r1c1.value.match(/^×$/)){
document.tick.r1c1.value = "○";
}else{
document.tick.r1c1.value = "×";
}
}
```
これをあと８個書くのはさすがに手間がかかってしまい正しいとは思えませんが、
もしループ等を用いるとどのような方法があるでしょうか。

[edom18]

以下のようにするとすべてのセルにイベントを設定することが出来ます。
あとは、ハンドラの中で `this` を使えばセル自身の情報が参照できるので、そこから `name` を取得したり、値を参照したり、といったことが可能になります。

```
<table id="formTable">
<tr>
<td name="name-a">a</td>
<td name="name-b">b</td>
<td name="name-c">c</td>
</tr>
</table>

<script>
function handler(evt) {
// thisは `td` を参照している
var name = this.getAttribute('name');
console.log(name);
}
[].slice.call(document.querySelectorAll('#formTable td')).forEach(function (cell) {
cell.addEventListener('click', handler, false);
});
</script>
```

[edom18]

あ、すみません。例に則するならtdの中のinputにイベントを設定するのが正しかったですね。`querySelectorAll`のところを `#formTable td input` にすると設定できます。

Answer 2

<input type="button" name="r1c1" onclick="ticktack()">が2箇所あります。r1c1と同じ名前が使われているため切り替わりません。最下部にあるボタンのname属性をbtnなどに変えれば良いかと。

Answer 3

http://jsdo.it/katoy/WWTL に書いてみました。

html

<div id="board">   
</div>

javascript

var SPACE = ' ';
var STONES = ['☓', '◯' ];
var count = 0;

$('#board').on('click','td', function(e) {
    if ($(this).text() === SPACE) {
        $(this).text(STONES[count % 2]);
        count += 1;
    }
});

function make_board(w, h) {
    var table = document.createElement('table');    // table を生成
    for (var y = 1; y <= h; y++) {
        var tr = document.createElement('tr');      // tr を生成
        for (var x = 1; x <= w; x++) {
            var td = document.createElement('td');  // td を生成
            td.id= 'C' + (x * 10 + y);              // td に idを付与
            td.innerHTML = SPACE;
            tr.appendChild(td);                     // tr に td を追加
        }
        table.appendChild(tr);                      // tr をテーブルへ追加
    }
    $('#board').append(table);
}

make_board(3, 3);

css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fdd;
  font: 30px sans-serif;
}

table, td, th {
    border: 2px #000000 solid;
}

make_board(3, 3) を make_board(8, 8) に変更すれば、8 x 8 のテーブルが表示されます。

Answer 4

先ほどの続きですね。
ticktack関数内で、r1c1を固定で参照しているからですね。

以下は先ほどの回答のように、引数でidを渡して処理するサンプルです。
inputタグのところは、nameではなくidに変更しました。

<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>

まずはHTMLとJavaScriptの基礎を学習することをお勧めします。