Read and Update Data Attributes

function updateElementData(elementId, key, value) {
  const element = document.getElementById(elementId);
  if (element) {
    element.dataset[key] = value;
    console.log(`Data attribute 'data-${key}' updated to '${value}' on element '${elementId}'.`);
  } else {
    console.error(`Element with ID '${elementId}' not found.`);
  }
}

function getElementData(elementId, key) {
  const element = document.getElementById(elementId);
  if (element) {
    const dataValue = element.dataset[key];
    console.log(`Data attribute 'data-${key}' for element '${elementId}':`, dataValue);
    return dataValue;
  } else {
    console.error(`Element with ID '${elementId}' not found.`);
    return null;
  }
}

// Usage example:
// Assuming you have an element: <div id="productCard" data-id="123" data-price="29.99">Product A</div>

const productId = getElementData('productCard', 'id'); // Reads '123'
const productPrice = getElementData('productCard', 'price'); // Reads '29.99'

updateElementData('productCard', 'status', 'in-stock'); // Sets data-status="in-stock"
updateElementData('productCard', 'price', '24.99'); // Updates data-price="24.99"

console.log('Updated product status:', getElementData('productCard', 'status'));
console.log('Updated product price:', getElementData('productCard', 'price'));