html data- attribute as javascript parameter

Question

Lets say I have this    lt div data-uid  aaa  data-name  bbb   data-value  ccc  onclick  fun this data uid  this data-name  this data-value   gt    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

User · Answer

HTML    lt div data-uid  aaa  data-name  bbb   data-value  ccc  onclick  fun this   gt    JavaScript   function fun obj        var uid    obj  attr  data-uid        var name    obj  attr  data-name        var value    obj  attr  data-value        but I m using jQuery

User · Answer

The short answer is that the syntax is this dataset whatever   Your code should look like this    lt div data-uid  aaa  data-name  bbb  data-value  ccc      onclick  fun this dataset uid  this dataset name  this dataset value   gt    Another important note  Javascript will always strip out hyphens and make the data attributes camelCase  regardless of whatever capitalization you use  data-camelCase will become this dataset camelcase and data-Camel-case will become this dataset camelCase   jQuery  after v1 5 and later  always uses lowercase  regardless of your capitalization   So when referencing your data attributes using this method  remember the camelCase    lt div data-this-is-wild  yes  it s true      onclick  fun this dataset thisIsWild   gt    Also  you don t need to use commas to separate attributes

User · Answer

you might use default parameters in your function and then just pass the entire dataset itself  since the dataset is already a DOMStringMap Object   lt div data-uid  aaa  data-name  bbb  data-value  ccc  onclick  fun this dataset   gt    lt script gt  const fun     uid  ddd   name  eee   value  fff   other  default                       lt  script gt    that way  you can deal with any data-values that got set in the html tag  or use defaults if they weren t set - that kind of thing  maybe not in this situation  but in others  it might be advantageous to put all your preferences in a single data-attribute   lt div data-all    uid   aaa   name   bbb   value   ccc    onclick  fun JSON parse this dataset all    gt    there are probably more terse ways of doing that  if you already know certain things about the order of the data   lt div data-all  aaa bbb ccc  onclick  fun this dataset all split        gt

User · Answer

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

User · Answer

If you are using jQuery you can easily fetch the data attributes by    this  data  id   or   event target  data  id

User · Answer

JS  function fun obj        var uid    obj  data  uid        var name    obj  data  name        var value    obj  data  value

[javascript] html "data-" attribute as javascript parameter

Examples related to javascript

Examples related to html

Examples related to parameters