質問編集履歴

1 試したソースコード、詳しいエラーの症状の明記

stalin

stalin score 1

2019/02/14 01:59  投稿

【javascript】配列内の要素の操作
### 前提・実現したいこと
配列内の要素がクリックされた時に、その要素に画像を表示したい
### 発生している問題・エラーメッセージ
```
マインスイーパーを練習で作っています。試験的に9マスで作っています。
9マスをシャッフルして、3,4番目を取り出すことでランダムに爆弾の位置を二箇所決定しています。
爆弾の配列[bom]内の要素がクリックされた時にその要素の上に、爆弾の画像を表示させたいのですが、どうしたらいいでしょうか?
爆弾のリンクはhttps://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=2ahUKEwiXlpvRirngAhVGdXAKHe5IDwYQjRx6BAgBEAU&url=https%3A%2F%2Fpublicdomainq.net%2Fbomb-explosive-weapon-0001415%2F&psig=AOvVaw1XwPdBGNX9BvW7bJrm5nEb&ust=1550160130719476
該当のソースコードで試したら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))で動作テストしています。
  • JavaScript

    20935 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る