How can I get the values of data attributes in JavaScript code

Question

I have next html   lt span data-typeId  quot 123 quot  data-type  quot topic quot  data-points  quot -1 quot  data-important  quot true quot       id  quot the-span quot  gt  lt  span gt   Is it possible to get the attributes that beginning with data-  and use it in the JavaScript code like code below  For now I get null as result  document getElementById  quot the-span quot   addEventListener  quot click quot   function        var json   JSON stringify           id  parseInt this typeId           subject  this datatype          points  parseInt this points           user   quot H  Pauwelyn quot

User · Answer

You could also grab the attributes with the getAttribute() method which will return the value of a specific HTML attribute.

_x000D_

var elem = document.getElementById('the-span');_x000D_
_x000D_
var typeId = elem.getAttribute('data-typeId');_x000D_
var type   = elem.getAttribute('data-type');_x000D_
var points = elem.getAttribute('data-points');_x000D_
var important = elem.getAttribute('data-important');_x000D_
_x000D_
console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`_x000D_
);

_x000D_

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

_x000D_

User · Answer

Circa 2019  using jquery  this can be accessed using     DOMId   data  typeId   where     DOMId   is the jquery selector for your span element

User · Answer

Modern browsers accepts HTML and SVG DOMnode dataset  Using  pure Javascript s DOM-node dataset property   It is an old Javascript standard for HTML elements  since Chorme 8 and Firefox 6  but new for SVG  since year 2017 with Chorme 55 x and Firefox 51     It is not a problem for SVG because in nowadays  2019  the version s usage share is dominated by modern browsers   The values of dataset s key-values are pure strings  but a good practice is to adopt JSON string format for non-string datatypes  to parse it by JSON parse     Using the dataset property in any context  Code snippet to get and set key-value datasets at HTML and SVG contexts    x000D   x000D  console log  -- GET values --   x000D  var x   document getElementById  html example   dataset  x000D  console log  s    x s    x000D  for  var i of JSON parse x list   console log  list i   i  x000D   x000D  var y   document getElementById  g1   dataset  x000D  console log  s    y s    x000D  for  var i of JSON parse y list   console log  list i   i  x000D   x000D  console log  -- SET values --    x000D  y s  BYE    y list  null   x000D  console log  document getElementById  svg example   innerHTML   x000D   lt p id  html example  data-list   1 2 3   data-s  Hello123  gt Hello  lt  p gt  x000D   lt svg id  svg example  gt  x000D     lt g id  g1  data-list   4 5 6   data-s  Hello456 SVG  gt  lt  g gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

You can access it as  element dataset points   etc  So in this case  this dataset points

User · Answer

if you are targeting data attribute in Html element   document dataset will not work  you should use   document querySelector  html   dataset pbUserId   or   document getElementsByTagName  html   0  dataset pbUserId

User · Answer

You need to access the dataset property   document getElementById  the-span   addEventListener  click   function       var json   JSON stringify       id  parseInt this dataset typeid       subject  this dataset type      points  parseInt this dataset points       user   Lu  s              Result      json would equal     id   123   subject    topic    points   -1   user    Lu  s

User · Answer

Try this instead of your code   var type     the-span   attr  data-type    alert type

User · Answer

Because the dataset property wasn t supported by Internet Explorer until version 11  you may want to use getAttribute   instead   document getElementById  the-span   addEventListener  click   function      console log this getAttribute  data-type           Dataset documentation  getAttribute documentation

[javascript] How can I get the values of data attributes in JavaScript code?

Examples related to javascript

Examples related to html

Examples related to custom-data-attribute