- ベストアンサー
繰り返し処理をして、要素がいくつあっても、うまくい
while文で繰り返し処理をして、要素がいくつあっても、うまくいくようにしたいのですが、var inputResultをカプセル化できないのでこのような場合どうすればいいのでしょうか？ https://codepen.io/anon/pen/XqOWrQ document.querySelectorAll('.js-myBtn').addEventListener と変更したのですが、このボタンの一つ目を押したら一つ目として実行二つ目以降も同様にとなりません。 イベントを起こすトリガーの要素を配列で指定はできないのでしょうか？
- mousugusokoni
- お礼率52% (43/82)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
addEventListenerは要素に適応できるメソッドですが、要素の配列には適応できません。 今回のように対象の要素が固まっている場合は、それらを囲む親要素を用意して、その親要素１つにイベントハンドラを設定するのが良いでしょう １つにまとめても、イベントハンドラ中で実際どの要素が対象だったかを知ることが出来ます いっそ最も親のレイヤーであるdocument.bodyやwindowなどに設定しても良い場合もあります もちろんわざわざ配列をイテレートして各要素にハンドラを設定してもいいですし、 カスタムエレメントとして定義して要素が生まれたときに設定されるようにもできます
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
ボタンが100個あったなら addEventListener を100回登録するの？ それは馬鹿げた考え！ 何個あろうが親である document で監視する。1個で済む。 body 要素が読み込まれる前でも document は存在するし... まぁこれは定石。 <!DOCTYPE html> <meta charset="UTF-8"> <title>Event</title> <body> <input type="button" value="btn1"> <input type="button" value="btn2"> <input type="button" value="btn3"> <script> function handleEvent (event) { let e = event.target; if ('button' === e.type) { alert(e.value + 'ボタンが押された'); } } document.addEventListener ('click', handleEvent, false) </script>
- b0a0a
- ベストアンサー率49% (156/313)
ただ単にイベントは親要素へ伝播するということだけなので、 ちょっと適当に探しただけではいいのが見つかりませんが、 イベントの仕組みを学べば自ずと理解できることだと思います https://www.webprofessional.jp/event-bubbling-javascript/ このような情報をたくさん見るといいでしょう
関連するQ&A
- iがクリックごとに増えるようにしたい
二度目からはvar i = 0;を行わずにiがクリックごとに増えるようにしたいのですが、うまくいきません var firstClick = true; const startBtn = document.getElementById('js'); startBtn.addEventListener('click', ()=> { if(firstClick) { var i = 0; firstClick = false; } ~ stageNumDefault の二度目クリック時に数値が増えていかずNaNになってしまいます。 https://codepen.io/anon/pen/VbPpby に再現しておきました。
- ベストアンサー
- JavaScript
- 空の要素の文字列を取得するとnullではなくund
空の要素の文字列を取得するとnullではなくundefinedが返ってくるのはなぜでしょうか？ var history1Txt = history1.value; また値が入っていてもundefinedが返ってきます。 値が入っている時だけ新しい履歴のテキストを古い履歴にコピーして、常に履歴がサイクルするようにしたいです。 https://codepen.io/anon/pen/MVzRLa
- ベストアンサー
- JavaScript
- jqueryのthisはイベントが起きている要素？
jqueryのthisはイベントが起きている要素を示すそうですが、 下記の例の.js-is-input-error1をthisにしても必須項目と出てきません。 こちらの例であればイベントが発生している要素とは、必須項目というテキストが出て来るspanタグがそれに該当する要素ではないのでしょうか？ https://codepen.io/anon/pen/VmgPav アニメーションなら動いている要素が、イベントが発生している要素ということでしょうか？ イベントが発生している要素というのがどうもはっきりわかりません。 アニメーションなら、(div.anime).animation()ならdiv.animeがイベントが発生している要素ですよね。 (button).click() ｛ (div.anime).animation() ｝ であればbuttonではなくdiv.animationがイベントが起きている要素ですよね？
- 締切済み
- JavaScript
- JSがうまくいかない
クリックするたびにポイントが１０加算されるようにしたかったのですが、なぜかクリックするとNANになってしまいます。 codepen上ではうまく再現できていないですが、ソースを張っておきました。 https://codepen.io/anon/pen/oWbvEe?editors=0001 またインスペクタで確認してNanだったのですが、codepenはインスペクタのようにソースを見る機能はないのですか？
- ベストアンサー
- JavaScript
- buttonタグがうまくいかない
【半角は0.5文字】として、自動文字数カウントしますの部分にリセットボタンを作ろうとしたのですがなぜがresetという文字列が出てこず、白い線のようになってしまいます。 下記では問題なくできているのになぜでしょうか？ https://codepen.io/anon/pen/vRGvOe webcreation.space/html/count-tool.html#js-goto-count-half です。
- ベストアンサー
- HTML
- .styleがうまくいきません。
.styleがうまくいきません。 var debu = mathGetClass.style.position = 'fixed'; mathGetClass.style.position = 'top mathRandom + px'; mathGetClass.style.position = 'left mathRandom + px'; console.log(debu); としてもdebuの中身がfixedになってしまいます。 また、複数のCSSを一括指定したい場合は、 連想配列を使うのでしょうか？ https://codepen.io/anon/pen/QpKzPR?editors=1111
- ベストアンサー
- JavaScript
- チェックボックスがすべてfalseになる
チェックボックスがチェックされているか否かによって 処理をかえたいのですが なぜかチェックをしていてもすべてfalseになってしまいます。 これはチェックしていればtrue、していなければfalseになるはずなんですよね？ 一部抜粋しました。 https://codepen.io/anon/pen/jmoLmQ
- ベストアンサー
- JavaScript
- fizzbuzzがうまくいきません
fizzbuzzがうまくいきません https://codepen.io/anon/pen/mWbvbp?editors=1112 fizzbuzzだけになってしまいます。 つまりあまりが両方ともすっと0になっているようですが、 なぜ1づつ増えて行っていないのでしょうか？ インスペクタで見ると3fizと5fizは0になっています。 始めは0割る3はあまりが0なので初めのあまりは0だからでしょうか？ するとループ処理の結果どうなっているかというのはインスペクタで見ることはできないのでしょうか？
- ベストアンサー
- JavaScript
- アロー関数で変数に入れて名前のある関数にする
JSでsetTimeoutでのスライドショーの停止、再生がうまくいきません。 http://codepen.io/anon/pen/RVNgLr 問題なく動いているので、停止再生の部分以外は間違えがないと思うのですが、 停止再生の部分に問題はありますでしょうか？ 抜粋しておきました。 let iterative = ()=> { setTimeout(myChange , 5000); // } const pauseBtn = document.getElementById('js-pause-btn'); pauseBtn.addEventListener('click', ()=> { clearTimeout(iterative); }); 停止は下記でできるがこれですと名前のある関数にできないので再度動かすことができないのです。 let iterative = { setTimeout(myChange , 5000); // } pauseBtn.addEventListener('click', ()=> { clearTimeout(iterative); }); const playBtn = document.getElementById('js-play-btn'); playBtn.addEventListener('click', ()=> { iterative(); }); pauseBtn.addEventListener('click', ()=> { clearTimeout(iterative); }); iterative();はiterativeという名前の関数を作らないと実行できないので、停止できない理由はわかっているのですが、アロー関数で変数に入れて名前のある関数にすることができないのでどうすれば両方とも実現できるのかわかりません。
- 締切済み
- JavaScript
- disabledプロパティが存在しないと出てきます
disabledプロパティが存在しないと出てきます。 下記の部分です・ if(hintBtn.disabled === 'disabled') もう少し全体像は下記です。 https://codepen.io/anon/pen/wjbebe 仕様上disabledプロパティは、初めは存在しないのでしょうか？
- ベストアンサー
- JavaScript
お礼
Inputタグのボタンがたくさんあって個数が決まっていない場合もこのInputタグを全体を囲んだ親要素と作ればできるということでよろしいでしょうか？ ちょっと忙しくなったので、お時間ください。
補足
親要素１つにイベントハンドラを設定と検索しても出てこないのですが、こんな検索をするとこの方法がでると教えていただけますでしょうか？