JavaScript onclick 書き換え

前提・実現したいこと

JavaScriptでボタンの文字を書き換えたいのですが上手くいきません。

ボタンが複数個あり、それを押したときにvalueを取得。その値に応じて押されたボタンの文字を上書きしたです。

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

jsファイルの32行目の
btn00.onclick = judge;
にエラーメッセージがでてボタンを押してもなにも変化がありません。

エラーメッセージ
Uncaught TypeError: Cannot set property 'onclick' of null

該当のソースコード

PHP
1  <body>
2    <table>
3    <?php
4    for ($i=0; $i<20; $i++){
5      $array[] = 0;
6    }
7    for ($i=0; $i<=4; $i++){
8      array_push($array, 1);
9    }
10    shuffle($array);
11
12    for ($i=0; $i<=4; $i++){
13      echo "<tr>";
14      for ($j=0; $j<=4; $j++){
15        $mine = array_shift($array);
16        echo "<td><button id=\"btn.{$i}{$j}\" value=\"$mine\">?</button></td>";
17      }
18      echo "</tr>";
19    }
20    ?>
21    </table>
22    <script src="./minesweeper.js"></script>
23  </body>
24

JavaScript
1var btn00 = document.getElementById("btn00");
2var btn01 = document.getElementById("btn01");
3var btn02 = document.getElementById("btn02");
4var btn03 = document.getElementById("btn03");
5var btn04 = document.getElementById("btn04");
6
7var btn10 = document.getElementById("btn10");
8var btn11 = document.getElementById("btn11");
9var btn12 = document.getElementById("btn12");
10var btn13 = document.getElementById("btn13");
11var btn14 = document.getElementById("btn14");
12
13var btn20 = document.getElementById("btn20");
14var btn21 = document.getElementById("btn21");
15var btn22 = document.getElementById("btn22");
16var btn23 = document.getElementById("btn23");
17var btn24 = document.getElementById("btn24");
18
19var btn30 = document.getElementById("btn30");
20var btn31 = document.getElementById("btn31");
21var btn32 = document.getElementById("btn32");
22var btn33 = document.getElementById("btn33");
23var btn34 = document.getElementById("btn34");
24
25var btn40 = document.getElementById("btn40");
26var btn41 = document.getElementById("btn41");
27var btn42 = document.getElementById("btn42");
28var btn43 = document.getElementById("btn43");
29var btn44 = document.getElementById("btn44");
30
31
32btn00.onclick = judge;
33btn01.onclick = judge;
34btn02.onclick = judge;
35btn03.onclick = judge;
36btn04.onclick = judge;
37
38btn10.onclick = judge;
39btn11.onclick = judge;
40btn12.onclick = judge;
41btn13.onclick = judge;
42btn14.onclick = judge;
43
44btn20.onclick = judge;
45btn21.onclick = judge;
46btn22.onclick = judge;
47btn23.onclick = judge;
48btn24.onclick = judge;
49
50btn30.onclick = judge;
51btn31.onclick = judge;
52btn32.onclick = judge;
53btn33.onclick = judge;
54btn34.onclick = judge;
55
56btn40.onclick = judge;
57btn41.onclick = judge;
58btn42.onclick = judge;
59btn43.onclick = judge;
60btn44.onclick = judge;
61
62function judge(){
63  if (this.value === "0"){
64    var result = "safe";
65  } else {
66    var result = "out";
67  }
68  this.textContent = result;
69}
70

試したこと

if文はコメントアウトしたり、ただ文字を表示させようとしたりしたのですがまったく変わりません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

ベストアンサー

btn.{$i}{$j}

↑.入ってます

今回のデバッグの観点はまず「getElementByIdで想定通り要素がとれているか」ですね。

投稿2019/12/12 07:02

編集2019/12/12 07:03

m.ts10806

総合スコア80875

humhum81131

2019/12/12 07:18

解決しました！完全に消すのを忘れていました。ありがとうございます。

m.ts10806

2019/12/12 07:24

必ずブラウザに表示されたhtmlを確認してください。

humhum81131

2019/12/12 07:37

気を付けます。回答ありがとうございました。

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

サンプル

html
1<?php
2$array = [
3    '0',
4    '1',
5    '0',
6    '1'
7];
8?>
9<body>
10<table>
11    <tr>
12        <?php foreach ($array as $item): ?>
13            <td>
14                <button class="btn-mine" value="<?php echo $item; ?>">?????</button>
15            </td>
16        <?php endforeach; ?>
17    </tr>
18</table>
19<script>
20    let buttons = document.getElementsByClassName('btn-mine');
21    console.log(buttons);
22    for (let i = 0; i < buttons.length; i++) {
23        let elem = buttons[i];
24        elem.addEventListener('click', function () {
25            var result = '';
26            if (this.value === '0') {
27                result = 'safe';
28            } else if (this.value === '1') {
29                result = "out";
30            }
31            this.textContent = result;
32        });
33    }
34</script>
35</body>