前提・実現したいこと
配列内の要素がクリックされた時に、その要素に画像を表示したい
発生している問題・エラーメッセージ
マインスイーパーを練習で作っています。試験的に9マスで作っています。 9マスをシャッフルして、3,4番目を取り出すことでランダムに爆弾の位置を二箇所決定しています。 爆弾の配列[bom]内の要素がクリックされた時にその要素の上に、爆弾の画像を表示させたいのですが、どうしたらいいでしょうか? 該当のソースコードで試したらCannot set property 'onclick' of nullというエラーが出ました。
該当のソースコード
[HTML] <!DOCTYPE html> <html> <head> <meta content="text/html; charset=shift_jis" http-equiv"Content=Type" /> <title></title> <link rel="stylesheet" type="text/css" href="背景など.css"> </head> <body> <h1>マインスイーパーランダム</h1> <table id="field"> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> </table> <script src="moving.js"></script> </body> </html>
[js] //ますの要素をまとめて指定 var arr = Array.from(document.getElementsByTagName('td')); var a = arr.length; //シャッフルアルゴリズム while (a) { var j = Math.floor( Math.random() * a ); var t = arr[--a]; arr[a] = arr[j]; arr[j] = t; } //3,4番目を指定して分ける const bom = arr.splice(3,2); console.log(arr); console.log(bom); document.getElementById(bom).onclick = function() { document.getElementById(bom).innerHTML = "img/bom1.jpg"; }
[css] body { background-color: #263238; } h1 { color: #FFFFFF; } table { width: 400px; height: 400px; margin-left: auto; margin-right: auto; } td { width: 10%; height: 10%; background-color: #455A64;
補足情報
google chrome(バージョン: 72.0.3626.96(Official Build))で動作テストしています。
(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「発生している問題」の部分はコードでないので、コードブロックで囲む必要はありません。
また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。