Get element from which onclick function is called

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

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

Function test():

function test()
{
    var button_name = this.html;
    console.log("Im button "+ button_name);
}

How can I get informations about the clicked button? e.g. How can i read the html?

jsfiddle: https://jsfiddle.net/c2sc9j9e/

Answers:

Answer

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

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)
    });
    
Answer

	function test(button)
	{
	    var button_name = button.getAttribute('name');
	    console.log("Im button "+ button_name);
	}
	<button onclick="test(this)" name="button1">Button 1</button>
	<button onclick="test(this)" name="button2">Button 2</button>
	<button onclick="test(this)" name="button3">Button 3</button>

Answer

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

Answer

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

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

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

I came across an other extremely simple way to do it in Vanilla JS so I post it here for reference:

function whoami () {
  var caller = event.target;
  alert("I'm " + caller.textContent);
}
<button onclick="whoami()">Button 1</button>
<button onclick="whoami()">Button 2</button>
<button onclick="whoami()">Button 3</button>

I'm not sure about the browser support for it but it works at least on Safari, Firefox and Blink based browsers.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.