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

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

ただいまの
回答率

90.04%

javascript で、buttonをクリックした時のそのbutton の属性値を取得したい

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 109

uirochan

score 1

前提・実現したいこと

複数のbuttonから、1つを選びクリックしたら、そのbutton にある属性値を取得したのですが、
できなく困ってます。
下のコードでいうと、2番buttonを押したら2番のvalueである「2」を取得したいです。
jquery では取得できてます。

プレーンのjavascripの書き方がわからず
質問させていただきました。

どうぞよろしくお願いします。

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

ボタンをクリックしても、console では何も表示されず。

該当のソースコード

<section id = "numberBox">
  <button value="1">1番</button>
  <button value="2">2番</button>
  <button value="3">3番</button>
</section>
let button = document.querySelector('button');

button.addEventListener("click", function() {
  let numberValue = button.getAttribute(value);
  console.log(numberValue); 
}, false);

試したこと

jquery での動作確認。

   $('button').on('click', function(){
    console.log($(this).val());
   });

補足情報(FW/ツールのバージョンなど)

vscode , google chrome

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+3

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">1番</button>
                <button type="button" id="button2" value="2">2番</button>
                <button type="button" id="Button3" value="3">3番</button>
            </section>
        </div>
        <div id="result"></div>
    </form>
</body>
</html>

実行結果は、例えば[3番」をクリックすると以下のようになります:

イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/09 13:20

    回答ありがとうございます。

    自分のコードが、最初のbutton しか参照していなく、親要素のid から参照しなければいけないと
    いうことがわかりました。

    初心者のため書いていただいたコードがあまり理解できないので、調べてみます。

    ご丁寧にありがとうございます。

    キャンセル

  • 2019/11/09 13:34

    > 自分のコードが、最初のbutton しか参照していなく、親要素のid から参照しなければいけないということがわかりました。

    どこか誤解しているような気がします。質問のコード:

    let button = document.querySelector('button');

    のようにしても、上記 button には最初の要素 <button value="1">1番</button> しか取得できないのです。

    そこは jQuery の $('button') とは異なります(jQuery の $('button') の方は 3 つの button のコレクションになります)

    getElementsByTagName('button') を使えば全ての button 要素のコレクションを取得できますが、質問にあった 3 つの他にも button があるとそれまで取得されてしまいますし、リスナをアタッチするのも面倒なのでお勧めしません。

    Document.getElementsByTagName()
    https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

    キャンセル

  • 2019/11/09 13:36

    > 初心者のため書いていただいたコードがあまり理解できないので、調べてみます。

    調べても分からないことがあれば質問してください。分からないからと言って放置して去ってしまうのは止めてくださいね。

    キャンセル

+1

getAttribute('value')としてください。

valueのままだと、「value変数に入っている値の名前の属性」を参照してしまいます。


なお、<button>valueはユーザーが書き換えないのであまり問題ないですが、<input>などのvaluegetAttributeで取得すると、HTMLに書かれた初期値が取れてしまいます(Qiita)。elem.valueのようにプロパティから取得してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/09 12:38

    ご回答ありがとうございます。

    getAttribute('value') と訂正させていただいたところ、button 1番をクリックしたら「1」を取得できましたが、
    button 2番、button 3番では反応がありません。

    すべてのボタンが対象になってないようで、修正方法がわかりません。
    よろしくお願いします。

    キャンセル

+1

this を利用ください。eventが発生したらthisを参照したり、returnしたりすればよいです。valueを参照する場合はthis.valueなどでよいです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/09 12:42

    返信ありがとうございます。

    this.valueで試したところ、button1番では動作しvalueの値が取得できましたが、
    button2番 button3番では動作しません。

    すべてのボタンがクリックのイベントの対象になってないようです。
    よろしくお願いします。

    キャンセル

  • 2019/11/10 11:54

    thisはclick eventが発生したボタンのことなので、1つしかないです。ほかのボタンを見たいなら、thisの親の下のボタン(this.parrent.inputみたいな)すべてを参照する必要があります。

    キャンセル

checkベストアンサー

0

何もsectionへのバブリングまで見る必要はないので、ボタンを監視する元のコードに近い形で書いてみました。皆様の言ってたやつをまとめただけです。

変更点

  • querySelector -> querySelectorAll
  • ループ追加
  • valueプロパティの直参照
<section id = "numberBox">
    <button type="button" id="button1" value="1">1番</button>
    <button type="button" id="button2" value="2">2番</button>
    <button type="button" id="Button3" value="3">3番</button>
</section>
<script>
const buttons = document.querySelectorAll('button');
buttons.forEach(function(button) {
    button.addEventListener("click", function() {
      console.log(button.value); 
    }, false);
});
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/12 08:42

    「あなたの」個人的意見と「質問者の」個人的意見がぴったり同じという主張が私には何とも不可解です。同一人物なのですか?

    キャンセル

  • 2019/11/12 08:43

    わからなかったらわからないところを聞けばいいだけで、それを拒否していないのになぜ嫌がらせなのか理由を説明できますか?

    キャンセル

  • 2019/11/12 08:45

    「JavaScript バブリング 初心者」で検索すると多くの情報がみつかりますが、これらはみな嫌がらせですか?

    キャンセル

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

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる