<!DOCTYPE html>
<html>
<head>
<title>Department data using dataset</title>
</head>
<body>
<div id="department" data-id="124120" data-org="mycorp" data-name="finance" data-total-members="125" data-status>Finance Department</div>
<p><span id="trigger">Click Me</span></p>
<table id="data-table">
<tr><td>Id</td><td id="data-id"></td></tr>
<tr><td>Name</td><td id="data-name"></td></tr>
<tr><td>Organization</td><td id="data-org"></td></tr>
<tr><td>Total Members</td><td id="data-members"></td></tr>
<tr><td>Status</td><td id="data-status"></td></tr>
</table>
</body>
</html>
#department {
padding: 1em;
background: gray;
color: white;
font-size: 2em;
}
#trigger {
padding: 0.5em;
background: green;
color: white;
cursor: pointer;
}
// Get the element
var dept = document.querySelector( '#department' );
// Get the trigger
var trigger = document.querySelector( '#trigger' );
// Update Status
dept.dataset.status = 'active';
// Check values
trigger.addEventListener( 'click', function( event ) {
document.querySelector( '#data-id' ).innerHTML = dept.dataset.id;
document.querySelector( '#data-name' ).innerHTML = dept.dataset.name;
document.querySelector( '#data-org' ).innerHTML = dept.dataset.org;
document.querySelector( '#data-members' ).innerHTML = dept.dataset.totalMembers;
document.querySelector( '#data-status' ).innerHTML = dept.dataset.status;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.