Data Attributes Not Reflecting Changes in Event Listeners with Vanilla JavaScript
I'm currently facing an issue where data attributes on my HTML elements are not reflecting changes as expected when triggered by event listeners. I'm using vanilla JavaScript and targeting an `<input>` field with `data-*` attributes. Here's a simplified version of my code: ```html <input type="text" id="myInput" data-value="initial" /> <button id="updateBtn">Update Value</button> <p id="display">Current Value: <span id="valueDisplay">initial</span></p> ``` ```javascript const input = document.getElementById('myInput'); const button = document.getElementById('updateBtn'); const display = document.getElementById('valueDisplay'); button.addEventListener('click', () => { const newValue = input.value; input.setAttribute('data-value', newValue); display.textContent = input.dataset.value; }); ``` The issue arises when I change the input value and click the button; the displayed value correctly updates to whatever I typed, but when I try to log `input.dataset.value` after updating the attribute, it still holds the initial value. I see the `data-value` attribute in the DOM has been updated correctly, but `input.dataset.value` remains unchanged. I’ve tried logging the dataset value both before and after updating the attribute and it does not reflect the new value. Is there a known limitation or a specific way I need to read the `data-*` attributes to see the changes? I’ve also checked browser compatibility; I'm primarily using Chrome 118.0.5993.90. Any insights would be greatly appreciated!