Get and Set Custom Data Attributes on Elements

document.addEventListener('DOMContentLoaded', () => {
  const userCard = document.getElementById('user-card');

  if (userCard) {
    // Get data attributes
    const userId = userCard.dataset.userId;
    const userName = userCard.dataset.userName;
    const isActive = userCard.dataset.isActive === 'true'; // Convert string to boolean

    console.log(`User ID: ${userId}, Name: ${userName}, Active: ${isActive}`);

    // Set/Update data attributes
    userCard.dataset.userRole = 'admin';
    userCard.dataset.lastLogin = new Date().toISOString();

    console.log('Updated user role:', userCard.dataset.userRole);
    console.log('Last login:', userCard.dataset.lastLogin);

    // Access using dot notation or bracket notation
    const city = userCard.dataset['userCity']; // Hyphenated attributes become camelCase
    console.log('User City:', city);
  }

  // Example of using data attributes for a click handler
  const actionButton = document.getElementById('action-button');
  if (actionButton) {
    actionButton.addEventListener('click', (event) => {
      const actionType = event.target.dataset.actionType;
      const actionId = event.target.dataset.actionId;
      console.log(`Button clicked with action: ${actionType}, ID: ${actionId}`);
      // Perform action based on data attributes
    });
  }
});
/* Example HTML structure: */
/*
<div id="user-card" data-user-id="123" data-user-name="Alice" data-is-active="true" data-user-city="New York">
  <h2>User Profile</h2>
  <p>Details about the user.</p>
</div>
<button id="action-button" data-action-type="edit" data-action-id="456">Edit Item</button>
*/