Q&A
返信ありがとうございます。
this.valueで試したところ、button１番では動作しvalueの値が取得できましたが、
button2番 button3番では動作しません。
すべてのボタンがクリックのイベントの対象になってないようです。
よろしくお願いします。
前提・実現したいこと
複数のbuttonから、１つを選びクリックしたら、そのbutton にある属性値を取得したのですが、
できなく困ってます。
下のコードでいうと、2番buttonを押したら2番のvalueである「2」を取得したいです。
jquery では取得できてます。
プレーンのjavascripの書き方がわからず
質問させていただきました。
どうぞよろしくお願いします。
発生している問題・エラーメッセージ
ボタンをクリックしても、console では何も表示されず。
該当のソースコード
html
1<section id = "numberBox"> 2 <button value="1">１番</button> 3 <button value="2">２番</button> 4 <button value="3">３番</button> 5</section>
JavaScript
1let button = document.querySelector('button'); 2 3button.addEventListener("click", function() { 4 let numberValue = button.getAttribute(value); 5 console.log(numberValue); 6}, false);
試したこと
jquery での動作確認。
jquery
1 $('button').on('click', function(){ 2 console.log($(this).val()); 3 });
補足情報（FW/ツールのバージョンなど）
vscode , google chrome
回答4件
0
querySelector は "Document の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。" ということですので、今回の目的には使えません。
Document.querySelector()
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
3 つある全ての Button にリスナをアタッチしなければなりません。または、親要素の <section id = "numberBox"> にリスナをアタッチして、バブリングで上がってくるイベントを捕捉する方法があります。
イベントが発生すると event オブジェクトが生成され、その参照がリスナの第一引数に渡されます。それから target プロパティでイベントを発生させたオブジェクトを、eventPhase プロパティでフェーズ情報を取得できます。this はリスナをアタッチしたオブジェクトへの参照となりますのでその id プロパティでイベントを捕捉した要素の id 取得できます。
以下のような感じです。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> window.onload = function () { // Document の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、 // 文書内の最初の Element を返します。 //let button = document.querySelector('button'); let button = document.getElementById("numberBox"); button.addEventListener("click", function (event) { var phase = ""; if (event.eventPhase === 1) { phase = "capturing phase"; } else if (event.eventPhase === 2) { phase = "target phase"; } else if (event.eventPhase === 3) { phase = "bubbling phase"; } var str = "fired by: " + event.target.id + ", listened at: " + this.id + ", during " + phase + ", value: " + event.target.value + "<br />"; document.getElementById("result").innerHTML = str; }, false); } </script> </head> <body> <form id="form1" runat="server"> <div> <section id = "numberBox"> <button type="button" id="button1" value="1">１番</button> <button type="button" id="button2" value="2">２番</button> <button type="button" id="Button3" value="3">３番</button> </section> </div> <div id="result"></div> </form> </body> </html>
実行結果は、例えば［3番」をクリックすると以下のようになります：
投稿2019/11/09 03:26
編集2019/11/09 03:32
退会済みユーザー
総合スコア0
0
this を利用ください。eventが発生したらthisを参照したり、returnしたりすればよいです。valueを参照する場合はthis.valueなどでよいです。
投稿2019/11/09 02:37
総合スコア14
thisはclick eventが発生したボタンのことなので、1つしかないです。ほかのボタンを見たいなら、thisの親の下のボタン（this.parrent.inputみたいな）すべてを参照する必要があります。
0
getAttribute('value')としてください。
valueのままだと、「value変数に入っている値の名前の属性」を参照してしまいます。
なお、<button>のvalueはユーザーが書き換えないのであまり問題ないですが、<input>などのvalueをgetAttributeで取得すると、HTMLに書かれた初期値が取れてしまいます（Qiita）。elem.valueのようにプロパティから取得してください。
投稿2019/11/09 02:36
総合スコア145183
ご回答ありがとうございます。
getAttribute('value') と訂正させていただいたところ、button 1番をクリックしたら「１」を取得できましたが、
button 2番、button 3番では反応がありません。
すべてのボタンが対象になってないようで、修正方法がわかりません。
よろしくお願いします。
0
ベストアンサー
何もsectionへのバブリングまで見る必要はないので、ボタンを監視する元のコードに近い形で書いてみました。皆様の言ってたやつをまとめただけです。
変更点
- querySelector -> querySelectorAll
- ループ追加
- valueプロパティの直参照
HTML
1<section id = "numberBox"> 2 <button type="button" id="button1" value="1">１番</button> 3 <button type="button" id="button2" value="2">２番</button> 4 <button type="button" id="Button3" value="3">３番</button> 5</section> 6<script> 7const buttons = document.querySelectorAll('button'); 8buttons.forEach(function(button) { 9 button.addEventListener("click", function() { 10 console.log(button.value); 11 }, false); 12}); 13</script>
投稿2019/11/11 05:04
総合スコア943
回答ありがとうございます!
書いていただいたコードもわかりやすいです。
button がその 3 つ以外にもあって、それにはリスナがアタッチされては困るということはないのですか？ そのコード (最初の質問の jQuery のコードも) では、html ソースにある全て button のクリックでリスナが動きますよ。
そこは理解した上の話であれば良いのですが。
それはquerySelectorで選択出来るかどうかの話になります。
そういう設計選択で、そうなるなら、仕方なくバブリングで見るかもしれませんが、バブリングだと、ボタンのないところのイベントも拾うし、コードが煩雑になってしまいます。
少なくとも、初心者の頃、最初にバブリングのコードを教わることはなかったと思いますよ。
横レスでまぎらわしかったようですみませんが、上の私のコメントは dameo さんではなく、質問者さんに聞いてます。
まるで嫌がらせのように感じたので、横槍に横槍でもいいかと思いました。
もし、そこが気になるなら、回答前に質問への追記依頼でもして確認すべきです。
他の全ての質問でも、書いてもいない条件を前提に組み入れてものを言う人は見たことありません。
嫌がらせしたつもりはありません。あくまで質問者さんへの質問です。
ちなみに、同様なことは自分の回答のコメント欄で質問者さんへのレスとしても書きました。
いや、こちらに嫌がらせではなく、質問者への嫌がらせに見えただけです。
質問者さんのコードは明らかにそれが分かってないと、そう書かないコードだと思ったので。
そちらのコメント欄でも似たようなことを聞いていて、コードもバブリングのコードにしています。
個人的には意地悪と感じました。
あくまで質問者さんへの質問であることは上に申し上げた通りです。
何がそこまで聞かねばならないと思わせるのか知りませんし、聞いてどうしたいのかも分かりません。
すでに解決済でもあるし、こういうのが残ってると、質問者さんが次に質問・回答しにくくなります。
こちらが口を滑らせたせいかもしれず、ある意味申し訳ないのですが、回答者なのだから意固地にならずに柔軟に対応してほしかったです。
ここ teratail は技術者同士の情報交換・共有の場所だそうです。なので、質問者さんが解決済みにしたら終わりということはないはずです。そこのところは理解してもらえますか？
それを理解してもらえるなら、質問してもいいと思いませんか？
そういうシステムなので、そこには同意も合意も必要ないです。
技術的で意味のある有意義な情報が交換できそうなら何も言いませんよ。素直になるのは難しいもんですね。。。
何が嫌がらせなのかわかりませんでした。この質問の回答として正しいし、それ以上のことを教えています。コードも簡単で、わからないことがあれば遠慮なく聞くようにとまで書いています。
「素直になる・・・」の言葉、そっくりあなたにお返しします。
jQueryやquerySelectorでどういう要素が選択されるか分からない人が複数の要素をまとめて処理して、コンソールにその要素のvalueを表示するなんて記述はしないでしょ…。そのレベルの人ならまとめて書くことすらせずに、それぞれIDで記述したものを列挙するはずです。
HTMLの要素記述を決めるのは質問者であり、そこに限られた文字で簡潔に記述するなら、普通に考えて質問者のような記述になります。そこをあえて疑う理由がどこにあるのでしょう？他のボタンがあったら、選択から外れるように選択式やHTMLを変えればいいだけです。それをそもそも動かないと言っている元のコードに必要もなく手を入れてバブリング方式に変えた挙げ句、「理解していますか？」と聞くのはただの嫌がらせに見えてしまいます。
コードが簡単かどうかは質問者がどう感じるかですよ。
あなたは質問者と同一人物ですか？
違うなら、質問者がどう感じるかは前もってわからないはずで、たまたま難しかったものを嫌がらせと表現するのはいかがなものかと思います。
私は十分初心者に理解できるコードだと思います。
質問者が「分からなかった」と言ってるコードを「私は十分初心者に理解できるコード」と言っても意味ないです。個人的にバブリングイベントが初学者に適切とは思いませんし、論外ですね。反論がそれだけなら話は終わりですよ。
短い文しか読めないようなので短くします。
分からなかったのは結果論なのに嫌がらせと表現するのはいかがなものか。
「あなたの」個人的意見と「質問者の」個人的意見がぴったり同じという主張が私には何とも不可解です。同一人物なのですか？
わからなかったらわからないところを聞けばいいだけで、それを拒否していないのになぜ嫌がらせなのか理由を説明できますか？
「JavaScript バブリング 初心者」で検索すると多くの情報がみつかりますが、これらはみな嫌がらせですか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/09 04:20
退会済みユーザー
2019/11/09 04:34
退会済みユーザー
2019/11/09 04:36