質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

Q&A

4回答

231閲覧

【javascript】配列内の要素の操作

stalin

総合スコア13

JavaScript

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

0グッド

1クリップ

投稿2019/02/13 16:04

編集2022/01/12 10:55

前提・実現したいこと

配列内の要素がクリックされた時に、その要素に画像を表示したい

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

マインスイーパーを練習で作っています。試験的に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))で動作テストしています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/02/13 16:19

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「発生している問題」の部分はコードでないので、コードブロックで囲む必要はありません。 また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
guest

回答4

0

もし100x100マスのテーブルで作るとなったとき、現状では10000個のイベントをつけることになるのだから根本から考え直したほうがよい。
アドバイスするならそこからだろう?

javascript

1<!DOCTYPE html> 2<title>?</title> 3<meta charset="utf-8"> 4<style> 5</style> 6 7<body> 8<table border="1"></table> 9 10<script> 11 12let a = Array (20).fill().map ((a,b) => Array (20).fill ().map ((c,d)=> `${d},${b}`)); 13let t = document.querySelector ('table'); 14a.forEach(function(b){b.forEach(function(c){this.insertCell().textContent=c},this.insertRow())},t); 15 16t.addEventListener ('click', e=> { 17 let {textContent: t, cellIndex: x, parentNode:{rowIndex: y}} = e.target; 18 alert(`座標は(${x},${y})、値は \"${t}\" です`); 19},false); 20 21</script>

投稿2019/02/14 01:40

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

HTMLでid名は2つ宣言できません。
またdocument.getElementById()の引数はクォーテーションで囲む必要があります。

javascript

1 var arr = Array.from(document.getElementsByTagName('td')); 2 var a = arr.length; 3 4 //シャッフルアルゴリズム 5 while (a) { 6 var j = Math.floor( Math.random() * a );//ランダムな数字 7 var t = arr[--a]; // 8 arr[a] = arr[j]; 9 arr[j] = t; 10 } 11 12 const bom = arr.splice(3,2); 13 const classVal = "bom"; 14 15 for (var i = 0; i < bom.length; i++) { 16 bom[i].setAttribute('class', classVal); 17 bom[i].addEventListener('click', function(e) { 18 this.innerText = "Bom!!!!!";//ここを適宜変更してください。 19 }); 20 }

投稿2019/02/13 20:10

bellsmarket

総合スコア62

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/02/13 23:29

ネイティブなので、クラスを追加する時、setAttributeではなく、 bom[i].classList.add(classVal); でもいいかもしれませんね。
guest

0

ざっくりこんな感じ

javascript

1<style> 2.bom{color:red} /* これを消すとbomの位置がわからなくなる*/ 3</style> 4<script> 5document.addEventListener('click', function(e){ 6 var t=e.target; 7 if(t.nodeName=="TD"){ 8 if(t.classList.contains('bom')){ 9 alert('bom'); 10 }else if(t.classList.contains('safe') && !t.classList.contains('open')){ 11 t.classList.add('open'); 12 t.textContent="□"; 13 if(document.querySelectorAll('.safe').length==document.querySelectorAll('.open').length){ 14 alert('complete'); 15 } 16 } 17 } 18}); 19window.addEventListener('DOMContentLoaded', function(e){ 20 var td = document.querySelectorAll('td'); 21 [].forEach.call(td,function(x){ 22 x.classList.add('safe'); 23 }); 24 var a=Array(td.length).fill(null).map(function(x,y){ 25 return [y,Math.random()]; 26 }); 27 a.sort(function(x,y){ 28 return x[1]-y[1]; 29 }); 30 var boms=2; 31 Array(boms).fill(null).forEach(function(x,y){ 32 with(td[a[y][0]]){ 33 classList.remove('safe'); 34 classList.add('bom'); 35 } 36 }); 37}); 38</script> 39<table> 40<tbody> 41<tr> 42<td></td> 43<td></td> 44<td></td> 45</tr> 46<tr> 47<td></td> 48<td></td> 49<td></td> 50</tr> 51<tr> 52<td></td> 53<td></td> 54<td></td> 55</tr> 56</tbody> 57</table> 58

投稿2019/02/14 02:28

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

配列変数bomには、DOM要素が直接入っている状態なので、
document.getElementById(bom)では、要素を取得できません。
document.getElementById()メソッドは、

<div id="hoge"></div>など、id属性に指定した文字列を引数に渡し、該当のDOMを返すというメソッドです。 (document.getElementById('hoge') というように使う)

よって、下記のように、bomの要素一個一個にアクセスするとよいでしょう。

javascript

1// メモリ消費を防ぐために関数を先に定義 2var clickFunc = function(){ 3 this.innerHTML = '<img src="img/bom1.jpg">'; 4}; 5 6// 配列の全要素にforEachでアクセス、DOMに対して、onclickイベントを付与 7bom.forEach(function(val){ 8 val.onclick = clickFunc; 9}); 10

投稿2019/02/14 00:52

編集2019/02/14 01:32
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/02/14 01:02

.call(val)って必要ですか?つけるとその場で実行しませんか?
miyabi_takatsuk

2019/02/14 01:27

ご指摘ありがとうございます。 いけますね・・・。 val.onclick = function(){ val.innerHTML = '<img src="img/bom1.jpg">'; } でいいですよね 汗 回答修正します。
kei344

2019/02/14 01:29

val.onclick = clickFunc;で問題ないですよ。
miyabi_takatsuk

2019/02/14 01:30

ご指摘ありがとうございます!
miyabi_takatsuk

2019/02/14 01:33

そうでした、onclickさせた時、処理元のthisで要素自体を取得できるんでした。 ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問