<!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;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.