Lets say I have this:
<div data-uid=aaa data-name=bbb, data-value=ccc onclick=fun(this.data.uid, this.data-name, this.data-value)>
And this:
function fun(one, two, three) {
//some code
}
Well this is not working but I have absolutely no idea why. could someone post a working example please?
The easiest way to get data-* attributes is with element.getAttribute():
onclick=fun(this.getAttribute('data-uid'), this.getAttribute('data-name'), this.getAttribute('data-value'));
DEMO: http://jsfiddle.net/pm6cH/
Although I would suggest just passing this to fun(), and getting the 3 attributes inside the fun function:
onclick=fun(this);
And then:
function fun(obj) {
var one = obj.getAttribute('data-uid'),
two = obj.getAttribute('data-name'),
three = obj.getAttribute('data-value');
}
DEMO: http://jsfiddle.net/pm6cH/1/
The new way to access them by property is with dataset, but that isn't supported by all browsers. You'd get them like the following:
this.dataset.uid
// and
this.dataset.name
// and
this.dataset.value
DEMO: http://jsfiddle.net/pm6cH/2/
Also note that in your HTML, there shouldn't be a comma here:
data-name=bbb,
References:
element.getAttribute(): https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute.dataset: https://developer.mozilla.org/en-US/docs/DOM/element.dataset.dataset browser compatibility: http://caniuse.com/dataset
