<!DOCTYPE HTML>
<html>
<head>
<title>
How to get the data attributes
of an element using JavaScript ?
</title>
</head>
<body align="center">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px;
font-weight: bold;">
</p>
<span data-typeId="123" data-name="name"
data-points="10"
data-important="true" id="span">
This is thecElement.
</span>
<br>
<br>
<button onclick="GFG_Fun()"> click here </button>
<p id="GFG_DOWN" style="font-size: 20px;
font-weight: bold;
color:green;">
</p>
<script>
let el_up = document.getElementById('GFG_UP');
let el_down = document.getElementById('GFG_DOWN');
let input = document.getElementById('span');
el_up.innerHTML = "Click on the button to get "
+ "the data attributes of element.";
function GFG_Fun() {
let jsonData = JSON.stringify({
id: parseInt(input.getAttribute('data-typeId')),
points: parseInt(input.getAttribute('data-points')),
important: input.getAttribute('data-important'),
dataName: input.getAttribute('data-name')
});
el_down.innerHTML = jsonData;
}
</script>
</body>
</html>