Button on click creates alert to show data-id attribute

Question

I have a button like so:

<button data-id="1" onclick="showID()">Show ID</button>

And a function:

<script>
  function showID() {
   alert(($(this).data("id")));
  }
 </script>

I just want the data-id to be shown in the alert box. I've also tried

alert(($(this).data("id")));

But again nothing...

possible duplicate of [JavaScript - onClick to get the ID of the clicked button](http://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button) — Altay Mazlum, Aug 05 '15 at 09:35

score 3 · Answer 1 · answered Aug 05 '15 at 08:58

3

$(this) inside your click function indicates to either global in sloppy mode or undefined in strict mode.

You need to do like this:

<button data-id="1" onclick="showID(this)">Show ID</button>

<script>
  function showID(elem) {
   alert(($(elem).data("id")));
  }
 </script>

answered Aug 05 '15 at 08:58

Good answer. Enlighten the OP further by providing an example with jQuery `on("click")`. – Mouser Aug 05 '15 at 09:02

score 2 · Accepted Answer · answered Aug 05 '15 at 08:57

2

Try this

function showID(button) {
  alert($(button).attr('data-id'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>

answered Aug 05 '15 at 08:57

Thi Tran

Thankyou. Could i then give data-id a variable and output that instead? – Planty Aug 05 '15 at 09:24

score 0 · Answer 3 · answered Aug 05 '15 at 08:59

0

Currently this will not give you the right value, your code should be this way:

<button data-id="1" onclick="showID(this)">Show ID</button>

Then

<script>
  function showID(e) {
  alert(($(e).data("id")));
  }
</script>

answered Aug 05 '15 at 08:59

Luthando Ntsekwa

score 0 · Answer 4 · answered Aug 05 '15 at 09:02

this doesn't work the way you are trying.

pass this on click.

Check out this fiddle.

Here is the snippet.

function showID(ele) {
  alert(($(ele).attr("data-id")));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>

score 0 · Answer 5 · edited May 23 '17 at 12:06

0

Here there is an example, you have to pass the id to function in the button tag:

edited May 23 '17 at 12:06

Community

answered Aug 05 '15 at 09:03

Asoub

5 Answers5