Javascript, get the name of a clicked button

Question

Trying to get the id or name of the button that has been clicked. But I only get an undefined message in the popup when I try to access the id or name of the button. Could someone point me in the right direction to get this working?

<!DOCTYPE html PUBLIC "-//W2C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Testing : Buttons</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<div id="buttons" style="width:100%;height:100%">
    <p id="custom_buttons" >
    </p>
</div>

<div id="footer">
</div>

<script type="text/javascript">
$(function() {
    var datasetPresets = ["Python", "Java", "C++"];
    var datasetPresetsContainer = $("#custom_buttons");
    $.each(datasetPresets, function(index, value) {
        datasetPresetsContainer.append("<button class=std_buttons value=" + value + ">" + value + "</button>");
    });

    $("button.std_buttons").click(function () {
        var button = $(this);
        alert(button.id);
    });

});

</script>
</body>
</html>
</html

Thanks to the answers here, I realized that my variable was not named "id", but "value". So, now it works. Thanks. — Ørjan Pettersen, Mar 15 '14 at 08:34

score 7 · Accepted Answer · edited May 23 '17 at 11:48

7

Basically, try

alert(this.id);

instead of

alert(button.id);

But this question shows a minimum research effort, because it has been answered multiple times here, and a simple search would suffice:

How to get ID of button user just clicked?

Getting the ID of the element that fired an event

Get id of element on button click using jquery

how to get the id when a certain button is clicked using jquery

edited May 23 '17 at 11:48

Community

1
1

answered Mar 14 '14 at 07:22

bosnjak

8,424
2
21
47

Thanks. I have read many of the other threads, and quite a few more. But I have missed one thing, my variable is not named "id", it's named "value". So, obviously it would not work no matter what I tried. So the reason for asking, was not because lack of searching, but rather lack of js/jq experience. The answers here showed me that it should work, so there had to be some other mistake. Then I found the error. – Ørjan Pettersen Mar 15 '14 at 08:27

score 4 · Answer 2 · answered Mar 14 '14 at 07:30

4

In pure javascript, you would do something like this

$("button.std_buttons").click(function (event) {
    var button = event.target;
    alert(button.id);
});

read more about event object here https://developer.mozilla.org/en/docs/Web/API/Event

answered Mar 14 '14 at 07:30

Sajjad Ashraf

3,754
1
34
35

score 0 · Answer 3 · answered Mar 14 '14 at 07:20

0

You need to use attr() to get the id of your button because button is a jQuery object:

alert(button.attr('id');

or you can keep your selector but do not convert it to jQuery object:

var button = this;
alert(button.id);

answered Mar 14 '14 at 07:20

Felix

37,892
8
43
55

score 0 · Answer 4 · answered Mar 14 '14 at 07:21

0

you just use attr(), the properties are accessed using the attr("property name") in jquery

button.attr('id');

or just

 $(this).id

answered Mar 14 '14 at 07:21

Vinay Pratap Singh Bhadauria

9,829
3
28
49

Javascript, get the name of a clicked button

4 Answers4

Linked