ビンゴ作成:ループ処理を行っている部分のクリック処理について

phpでループ処理を行っている部分のクリック処理についてどのようにしたら良いでしょうか？よろしくお願いいたします。

###前提・実現したいこと
PHP,Javascript,Jqueryを使用してビンゴゲームを作ろうとしています。
動きの仕様としては、
・ランダムで数字が表示される
・表示された数字がシートにある時、そのマス（<td>）をクリックすると灰色に変わる
という感じです。

仕様の１つ目はできています。

###発生している問題・エラーメッセージ
表示されているシートのマス（<td>タグ）をクリックすると「Uncaught TypeError: Cannot read property 'on' of null」と値がちゃんとはいっていない？みたいで処理がうまくいきませんでした。

###該当のソースコード
index.php

<?php
    require_once(__DIR__ . '/config.php');
    require_once(__DIR__ . '/Bingo.php');

    $bingo = new \MyApp\Bingo();
    $nums = $bingo->create();
?>


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="euc-jp">
	<title>BINGO!</title>
	<link rel="stylesheet" href="css/styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/bingo.js"></script>
</head>
<body>
	<div id="container">
		<table id="sheet">
			<tr>
				<th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
			</tr>
			<?php for($i=0;$i<5;$i++){?>
			<tr>
				<?php for($j=0;$j<5;$j++){ ?>
				<td class="cols" onclick="colset()"><?= h($nums[$j][$i]); ?></td>
				<?php }?>
			</tr>
			<?php }?>
		</table><br>
		<section style="text-align:center;">
			<input type="button" id="start" name="start" value="スタート" onclick="startBingo()">
			<input type="button" id="stop" name="stop" value="ストップ" onclick="stopBingo()" style="display:none;">
			<br>
			<div id="view" style="text-align:center;"></div>
			<hr>
			<div id="out"></div>
			<hr>
		</section>
	</div>
    <script type="text/javascript">
        function colset(){
            $('#sheet td').on('click', function(){
                var col = $(this).text();
                console.log(col);
            });
        }
    </script>
</body>
</html>

Bingo.php

<?php

namespace MyApp;

class Bingo{

	public function create(){

		$nums = [];

		for($i = 0; $i <5; $i++){
			$col = range($i * 15 + 1 , $i * 15 +15);
			shuffle($col);
			$nums[$i] = array_splice($col,0,5);
		}

		$nums[2][2] = "FREE";
		return $nums;
	}

}

 ?>

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

回答3件

<td class="cols" onclick="colset()"> として colset 関数でクリックイベントをクリックするたびに割り当てるコードになっています。

ひとまず onclick属性および colset 関数は削除し、下記のようにしてみてはいかがでしょう。

HTML
1<td class="cols">

JavaScript
1$( function() {
2	$( '#sheet td' ).on( 'click', function() {
3		var col = $( this ).text();
4		console.log( col );
5	} );
6} );
7```**動くサンプル：**[https://jsfiddle.net/0o2fauge/](https://jsfiddle.net/0o2fauge/)
8
9---
10
11エラー内容が書かれているコードでは再現しなさそうなので、PHPのコードだけではなく出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記されてはいかがでしょうか。

投稿2016/10/06 03:38

kei344

総合スコア69400

terusan

2016/10/06 04:40

エラー内容どおりの再現を追記いたしました。ご指摘いただいたとおりcolset()をなくしデバッグ用で console.log $(function(){ 　console.log 　$('#sheet td').on('click', function(){ 　　console.log 　}); }); のようにし、実行してみたところ一つ目のconsole.logだけ出力されていました。この結果からいくと$(function(){});の中の処理が行われていないみたいなんですが、他にどこか問題があるということでしょうか。

kei344

2016/10/06 04:46

> 再現を追記こちらの環境では.text()部分以外の追記が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。上記コードについては #sheet td をクリックしたら反応するはずですよ。「動くサンプル：https://jsfiddle.net/0o2fauge/ 」に表示される「B I N G O」の「B」をクリックしたらコンソールに「B」が表示さるのは確認いただけましたか？ $('#sheet td').on('click', function(){/*なにか*/}); はid属性に「sheet」を指定したHTML要素に内包される全ての「td要素」の「click」時に「function(){/*なにか*/}」を実行するというものです。

terusan

2016/10/06 05:02

＞再現の追記・　.text() ・　.innerText kei344様のコードのように修正後も上記の部分の変更でも同じエラー「Uncaught TypeError: Cannot read property 'on' of null」と表示されました。 kei344様の動くサンプルでは私の求めている動きをしてくれているのですが…。 phpのversionって関係ありますか。使用しているversionは5.4になります。

date

2016/10/06 05:04

おそらく bingo.js 内の処理が関係しているのではないでしょうか

terusan

2016/10/06 05:08

bing.js内の処理が関係してたようです。解決いたしました。回答ありがとうございました。

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

自己解決

bingo.js内の処理を変更することにより解決いたしました。

投稿2016/10/06 05:09

terusan

総合スコア13

$(this).innerText;を
$(this).text();
にすることで取得できました。

javascript
1	<script type="text/javascript">
2        function colset(){
3            $('#sheet td').on('click', function(){
4           
5                var col = $(this).text();
6                console.log(col);
7            });
8        }
9    </script>