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

Question

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

解決済

回答 4

投稿 2016/06/10 13:06

評価
クリップ 1
VIEW 1,986

Alpha

score 41

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

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

よろしくお願いします

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 4 件

評価が高い順
新着順
古い順

+3

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

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

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

投稿 2016/06/10 13:23

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/06/10 13:33

修正して
```
</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 = "×";
}
}
```
これをあと８個書くのはさすがに手間がかかってしまい正しいとは思えませんが、
もしループ等を用いるとどのような方法があるでしょうか。

修正して ``` </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 = "×"; } } ``` これをあと８個書くのはさすがに手間がかかってしまい正しいとは思えませんが、もしループ等を用いるとどのような方法があるでしょうか。

キャンセル
2016/06/10 13:51

以下のようにするとすべてのセルにイベントを設定することが出来ます。
あとは、ハンドラの中で `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>
```

以下のようにするとすべてのセルにイベントを設定することが出来ます。あとは、ハンドラの中で `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> ```

キャンセル
2016/06/10 13:53

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

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

キャンセル

+2

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

投稿 2016/06/10 13:51

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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 のテーブルが表示されます。

投稿 2016/06/10 23:14

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

score 1 · Accepted Answer · 2016-06-10T13:31

先ほどの続きですね。
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の基礎を学習することをお勧めします。

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

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

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

関連した質問

同じタグがついた質問を見る

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

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

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

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン