Using an html "data-" attribute

Question

Consider a line such as this:

<div id='abc' onclick='DoSomething(this.id)'></div>

Now, suppose it's expanded to be something more like this:

<div id='abc' data-something='whatever' onclick='DoSomething(this.id)'></div>

There's no functional difference here yet, but this is my question. I'm looking for a way to pass the value of 'data-something' to the DoSomething function instead of the id. I can't seem to find a method of doing this? Is it possible?

Something like the following would be nice, but of course it's not how it works. (I'm only including it to help illustrate the intended goal.

<div id='abc' data-something='whatever' onclick='DoSomething(this.data-something)'></div>

And you copied and pasted the same error over and over. Missing a ' — epascarello
– epascarello, Commented Jul 19, 2013 at 15:28
As a combination of the answers, you could make a function that takes advantage of dataset and falls back to getAttribute: jsfiddle.net/C3rnr — Ian
– Ian, Commented Jul 19, 2013 at 15:43

Denys Séguret · Accepted Answer · 2013-07-19 15:34:47Z

10

You can do

DoSomething(this.dataset.something)

But it's generally recommended to separate the javascript part and the HTML, which is especially easy when your element has an id :

<div id='abc' data-something='whatever'></div>
<script>
    document.getElementById('abc').onclick = function(){
        DoSomething(this.dataset.something)
    }
</script>

On Internet Explorer, support for dataset is incomplete. On IE10-, You need to use

DoSomething(this.getAttribute('data-something'))

edited Jul 19, 2013 at 15:34

answered Jul 19, 2013 at 15:28

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dc5 Over a year ago

Just make sure it is available in the browsers you need to support can I use dataset

musefan · Accepted Answer · 2013-07-19 15:28:45Z

5

You should be able to do this.getAttribute("data-something"), like so:

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something"))></div>

or you can use this.dataset.something.

Here is my source

answered Jul 19, 2013 at 15:28

musefan

48.5k21 gold badges144 silver badges193 bronze badges

1 Comment

m b Over a year ago

This solution will work for our application perfectly. Thanks much! As a side note, we can't use the id for our purpose because we are integrating code that comes from two different sources with some (currently unfinished) in-house automation tools. The id's are unpredictable and uncontrollable from our side, so we have to rely on these extra data attributes (which are predictable and known to us) to accomplish our goal. Thanks again.

user1386320 · Accepted Answer · 2013-07-19 15:30:11Z

1

You should use getAttribute method:

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something")'></div>

But I highly suggest that you aviod inline javascript delegation to elements. You should better use DOM or jQuery for that and note that jQuery has a method for easier data-* attributes handling.

answered Jul 19, 2013 at 15:30

user1386320

Comments

Zauker · Accepted Answer · 2013-07-19 15:55:57Z

0

if you want consider jQuery you could convert your code in somethings like that:

html

<div id="abc" data-something="whatever">click here</div>

jQuery

jQuery(document).ready(function($) {
    $('#abc').on('click', function () {
        DoSomething($(this).attr('data-something'));
    });
});

or better

jQuery(document).ready(function($) {
    $('#abc').on('click', function () {
        DoSomething($(this));
    });
});

function DoSomething(obj){
    alert(obj.attr('id'));
    alert(obj.attr('data-something'));
}

answered Jul 19, 2013 at 15:55

Zauker

2,3943 gold badges28 silver badges36 bronze badges

Collectives™ on Stack Overflow

Using an html "data-" attribute

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related