Get value of the clicked button

Question

I have multiple buttons containing different values.

My buttons :-

<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>

Now, if I click on Button1, I should get it's value. That is 1, and if I click Button2, I should get value 2. I have written this code :-

<script type="text/javascript">
$("button").click(function() {
    var fired_button = $("button").val();
    alert(fired_button);
});
</script>

But it always alerts 1. What must I do to fix my code?

Answer 1

UPDATED

Use this instead of button in :

var fired_button = $("button").val(); 

You have to use this to target the current button clicked instead of button that will select all buttons in the DOM, .val() makes it to get the value of the first button.

---

$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>

Answer 2

You need to use this variable in order to access the clicked button's value.

<script type="text/javascript">
$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});
</script>

This would return the value of the button.

Answer 3

You could try something as simple as:

$(this).val();

$(function(){
    $("button").click(function() {
        var fired_button = $(this).val();
        alert(fired_button);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>

Note: you should add your event listeners after the document is ready. This is why, I have enclosed the event handler in the

$(function{})

This is a shorthand of

$(document).ready(function(){})

For more information about this, please have a look here.

Answer 4

Use this inside the click handler

<script type="text/javascript">
$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});
</script>

Answer 5

this will give you the element that was clicked, $(this) to get a jquery version.

Update your code to:

$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});

Answer 6

Try with $(this).val();. It will return clicked button value.

Answer 7

If you're using jQuery, you're looking for the .attr() function.

$(this).attr("value")

That code will give you the value attribute of the html element designed by $(this) (or you precise the ID of the element).

Answer 8

Try $(this).val(). 'this' always refers to the current object.

Answer 9

this will give you the element that was clicked, $(this) to get a jquery version.

Update your code to:

$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});

Answer 10

Plain JavaScript solution with ES6 syntax:

document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', () => {
        const fired_button = button.value;
        alert(fired_button);
        
    });
});