CODEWITHSUNDEEP
javascriptjquery
Planty
Planty

Reputation: 83

Button on click creates alert to show data-id attribute

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...

Upvotes: 1

Views: 2638

Answers (5)

Asoub
Asoub

Reputation: 2371

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

JavaScript - onClick to get the ID of the clicked button

Upvotes: 0

Shrinivas Shukla
Shrinivas Shukla

Reputation: 4453

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>

Upvotes: 0

Luthando Ntsekwa
Luthando Ntsekwa

Reputation: 4218

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>

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

$(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>

Upvotes: 3

Thi Tran
Thi Tran

Reputation: 701

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>

Upvotes: 2

Related Questions