Javascriptのテーブルのクリックイベントについて

いつもお世話になっています。
javascriptを使って人VS人の将棋のゲームを作っているものです。

現在は、HTMLに９×９のテーブルを作成しており、テーブルの任意のセルをクリックすると、クリックした場所に文字が入力されるようにしたいのですが、上手くいきません。

具体的な問題は、どこのセルをクリックしても、9行9列目に「押した」の文字が挿入されてしまいます。

var ban = document.getElementById('banmen');//テーブルを取得

//クリックした時のイベント
for (var x=0; x<9;x++){
  for(var y = 0; y < 9; y++){
    var oseta = ban.rows[x].cells[y];
    oseta.onclick = function(){Oseta(this);}
  }
}
function Oseta(Cell){
  oseta.innerText ="押した";
};

よろしくお願い致します。

退会済みユーザー

2018/01/10 08:48

htmlのソースも載せられますか？

yambejp

2018/01/10 08:52

「「押した」の文字が挿入されてしまいます」が仕様と違うのであれば、なんという文字が挿入される想定なのでしょうか？「クリックした場所に文字が入力される」ではわかりません

退会済みユーザー

2018/01/10 09:28

ご質問ありがとうございます。今回は解決できましたが、以後は、htmlのコードの掲載や、分かりやすい文章になるよう注意をしていきます。

行動規範の内容に同意します

回答3件

ベストアンサー

JavaScript
1function Oseta(Cell){
2  oseta.innerText ="押した";
3};

ここでosetaのinnerTextに「押した」と代入していますが、osetaという変数はforの中で定義したosetaを指しています。forの処理で最後にosetaに代入されるのはx=8,y=8のtdであるため、どこをクリックしても必ず右端のtdに「押した」が入ることになります。
あなたはonclickに登録する際、Oseta(this)とthisを渡しているので、ここでいうthisは各td自身となります。function Oseta(Cell)で受け取っているCellこそが「クリックされたtd」であるため、あなたがやりたいことはこう書けば動作します。

JavaScript
1function Oseta(Cell){
2  Cell.innerText ="押した";
3};

【動作サンプル】
https://jsfiddle.net/25tad28t/

投稿2018/01/10 09:08

masaya_ohashi

総合スコア9206

退会済みユーザー

2018/01/10 09:23

ご回答ありがとうございます。丁寧で分かりやすい解説とサンプルも載せていただき、本当に助かりました！ thisの理解がイマイチだったようなので、勉強し直します。

masaya_ohashi

2018/01/10 09:27

onclick等に渡すfunction内のthisはonclick等を持つエレメント自身を指すようになっています。そこら辺勉強してみてくださいね。

退会済みユーザー

2018/01/10 09:29

早速の返信ありがとうございます。これから、javascriptの勉強を頑張ります！

行動規範の内容に同意します

一度オブジェクトごと関数の引数に投げては？

javascript
1    var ban = document.getElementById('banmen');//テーブルを取得
2    
3    for (var x=0; x<9;x++){
4      for(var y = 0; y < 9; y++){
5        var oseta = ban.rows[x].cells[y];
6        //oseta.onclick = function(){Oseta(this);}
7        Oseta(oseta);
8      }
9    }
10    
11    function Oseta(Cell){
12        Cell.onclick=function(){
13            Cell.innerText ="押した";
14        };
15    };

追記
すみません9-9で0スタートでしたね

投稿2018/01/10 09:16

編集2018/01/10 09:23

sousuke

総合スコア3828

退会済みユーザー

2018/01/10 09:25

ご回答ありがとうございます。おかげで解決できました！

行動規範の内容に同意します

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5</head>
6<body>
7<table id="banmen" border="1">
8  <tr>
9    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
10  </tr>
11  <tr>
12    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
13  </tr>
14  <tr>
15    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
16  </tr>
17  <tr>
18    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
19  </tr>
20  <tr>
21    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
22  </tr>
23  <tr>
24    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
25  </tr>
26  <tr>
27    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
28  </tr>
29  <tr>
30    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
31  </tr>
32  <tr>
33    <td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td>
34  </tr>
35</body>
36<script>
37var ban = document.getElementById('banmen');//テーブルを取得
38//クリックした時のイベント
39for (var x=0; x<9;x++){
40  for(var y = 0; y < 9; y++){
41    var oseta = ban.rows[x].cells[y];
42    oseta.onclick = function(){
43      Oseta(this);
44    }
45  }
46}
47function Oseta(Cell){
48  Cell.innerText ="押した";
49};
50</script>
51</html>