Read and Write Custom Data Attributes on DOM Elements

function manageDataAttributes(elementId, dataKey, newValue = null) {
    const element = document.getElementById(elementId);
    if (!element) {
        console.error(`Element with ID '${elementId}' not found.`);
        return null;
    }

    if (newValue !== null) {
        // Set/Update a data attribute
        element.dataset[dataKey] = newValue;
        console.log(`Set data-${dataKey} to: ${newValue}`);
    } else {
        // Read a data attribute
        const value = element.dataset[dataKey];
        console.log(`Read data-${dataKey}: ${value}`);
        return value;
    }
    return element.dataset[dataKey]; // Return the current value after setting/reading
}

// Example Usage:
// HTML: <div id="product-card" data-product-id="123" data-category="electronics">Product Info</div>

document.addEventListener('DOMContentLoaded', () => {
    const productId = manageDataAttributes('product-card', 'productId');
    console.log(`Initial Product ID: ${productId}`); // Output: Initial Product ID: 123

    const category = manageDataAttributes('product-card', 'category');
    console.log(`Product Category: ${category}`); // Output: Product Category: electronics

    // Update a data attribute
    manageDataAttributes('product-card', 'status', 'in-stock');
    console.log(`Updated Status: ${document.getElementById('product-card')?.dataset.status}`); // Output: Updated Status: in-stock

    // Add a new data attribute
    manageDataAttributes('product-card', 'price', '99.99');
    console.log(`New Price: ${document.getElementById('product-card')?.dataset.price}`); // Output: New Price: 99.99
});