I have next html:
<span></span>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("the-span").addEventListener("click", function(){ var json = JSON.stringify({ id: parseInt(this.typeId), subject: this.datatype, points: parseInt(this.points), user: "H. Pauwelyn" });
});10 Answers
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" }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'));
});You can access it as
element.dataset.pointsetc. So in this case: this.dataset.points
You could also grab the attributes with the getAttribute() method which will return the value of a specific HTML attribute.
var elem = document.getElementById('the-span');
var typeId = elem.getAttribute('data-typeId');
var type = elem.getAttribute('data-type');
var points = elem.getAttribute('data-points');
var important = elem.getAttribute('data-important');
console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`
);<span></span>if you are targeting data attribute in Html element,
document.dataset will not work
you should use
document.querySelector("html").dataset.pbUserIdor
document.getElementsByTagName("html")[0].dataset.pbUserIdModern 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.
console.log("-- GET values --")
var x = document.getElementById('html_example').dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)
var y = document.getElementById('g1').dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)
console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( document.getElementById('svg_example').innerHTML )<p>Hello!</p>
<svg> <g></g>
</svg>Circa 2019, using jquery, this can be accessed using $('#DOMId').data('typeId') where $('#DOMId') is the jquery selector for your span element.
document.getElementById('selectTbl').addEventListener('change', function () { $("#selectTbl").val(); var style = $(this).val() == 1 ? 'block' : 'none'; document.getElementById('TblAdmin').style.display = style; var style = $(this).val() == 2 ? 'block' : 'none'; document.getElementById('TblMech').style.display = style; var style = $(this).val() == 3 ? 'block' : 'none'; document.getElementById('TblUser').style.display = style; var style = $(this).val() == 4 ? 'block' : 'none'; document.getElementById('TblBiz').style.display = style;
});Sorry to interrupt I think you already got the answer. Can someone help for me?
Here I want to display the div which is TblAdmin, TblMech, TblUser, TblBiz. I'm currently using NiceSelect but inside the select dropdown it has data value attribute. It actually not select but list-item inside unordered-list.
Like picture shown here,
2You can actually use JQuery to accomplish that in a very easy way
$(document).on('click', '.the-span', function(){
let type = $(this).data("type");
});Try this instead of your code:
var type=$("#the-span").attr("data-type");
alert(type);
