Question 35939 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to Select all buttons and alert their respective name when CLICKED in jQuery

$("button").on("click", function(){
  var buttonClicked = $("button").attr("name");
  alert("Button CLicked: " + buttonClicked);
}) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<h1 class="titleClass">jQuery</h1>
<div class="buttonClass">
    <button name="up_button" id="upB" class="upDown"></button>
    <button name="left_button" id="leftB" class="leftRight"></button>
    <button name="right_button" id="rightB" class="leftRight"></button>
    <button name="down_button" id="downB" class="upDown"></button>
</div>

I want to display the name (as alert or console.log) when a button is clicked from the above list

 $("button").on("click", function(){
   var buttonClicked = $("button").attr("name");
   alert("Button CLicked: " + buttonClicked);
 })
Tags:

4

Answers


  1. 0 
    <body>
    
    <h1 class="titleClass">jQuery</h1>
    <div class="buttonClass">
        <button name="up_button" id="upB" class="upDown">A</button>
        <button name="left_button" id="leftB" class="leftRight">B</button>
        <button name="right_button" id="rightB" class="leftRight">C</button>
        <button name="down_button" id="downB" class="upDown">D</button>
    </div>
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script >
        $("button").on("click", function(e){
        var buttonClicked = $("button").attr("name");
                console.log(e.target.name)
        }) 
    </script>
</body>

    Just need to have the event handler with event argument, and use event.target.valueto get the value of button that is clicked.

    Login or Signup to reply.
  2. 0

    try this:

    $(".buttonClass").on("click", function (event) {
    var buttonClicked = event.target.name;
    alert("Button CLicked: " + buttonClicked);
  });
    Login or Signup to reply.
  3. 0

    you are already calling the $("button") as eventlistener. Instead of calling another $("button") in variable initialization, use $(this)

     var buttonClicked = $(this).attr("name");

    $("button").on("click", function(){
  var buttonClicked = $(this).attr("name");
  alert("Button CLicked: " + buttonClicked);
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<h1 class="titleClass">jQuery</h1>
<div class="buttonClass">
    <button name="up_button" id="upB" class="upDown"></button>
    <button name="left_button" id="leftB" class="leftRight"></button>
    <button name="right_button" id="rightB" class="leftRight"></button>
    <button name="down_button" id="downB" class="upDown"></button>
</div>
    Login or Signup to reply.
  4. 0 
    $("button").on("click", function(){
     var buttonClicked = $(this).attr("name");
     alert("Button CLicked: " + buttonClicked);
})

    $(this) will select the object of clicked button

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search