Get element from which onclick function is called

Question

I have a button with a onclick attribute which is pointing to the function test().

Button 1
<         


        

Answer 1

you must pass "this" to function

<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>

<script>
    function test(t)
    {
        console.log(t);
    }
</script>

Answer 2

If you want to use Jquery, then you can call the $(this) object in the function.

Answer 3

just add id to each button and pass it to your test function

and here is working jsfiddle

<button onclick="test(this.id)" id="button1">1</button>
<button onclick="test(this.id)" id="button2">2</button>
<button onclick="test(this.id)" id="button3">3</button>

<script>
    function test(id)
    {
        var button_name = id;
        alert("Im button name is : "+ button_name);
        console.log("Im button name is :"+ button_name);
    }
</script>

Answer 4

Here is your solution jsfiddle , using jquery.

<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>

<script>
   function test(button)
   {
       var button_name = $(button).html();
       alert("Im button "+ button_name);
   }
</script>

Answer 5

Pass the this reference to the function, then read textContent property the text content of the node.

HTML

<button onclick="test(this)">Button 1</button>

Script

function test(elem){
   var button_name = elem.textContent;
}

Fiddle

Answer 6

Four options:

1. Pass this into the function.

   <button onclick="test(this)">Button 1</button>
   

   and then use that argument in the function.

2. Hook up the handlers with addEventListener or jQuery's on, and then use this within the handler.

   var buttons = document.querySelectorAll("selector-for-the-buttons");
   Array.prototype.forEach.call(buttons, function(btn) {
       btn.addEventListener("click", handler, false);
   });
   function handler() {
       // Use `this` here
   }
   

   jQuery version:

   $("selector-for-the-buttons").on("click", function() {
       // Use `this` here
   });
   

3. Hook up a single handler on a container these buttons are in, and use the target property of the event object to determine which was clicked (but note that if you use other elements within button, you'll need to loop up to the button first).

   document.querySelector("selector-for-the-container").addEventListener("click", function(e) {
       // Use `e.target` here
   }, false);
   

   jQuery version that handles the possibility of nested elements within the button for you:

   $("selector-for-the-container").on("click", "button", function() {
       // Use `this` here (note this is different from the DOM version above)
   });