How to capture the change of 'data-value' in <button> tag ? (html, js)

Question

How to capture the change of 'data-value' in tag ? (html, js)

// dropdown box

<button data-value="">'click'</button>
<ul>
 <li>option1</li>
 <li>option2</li>
</ul>

I need 1), 2), 3)

1) click li
2) data-value="" -> data-value="1"
3) $(button).on('change?', function() {} );

but change event support ONLY input, text tag not data-value and click event doesn't work. no change data-value right after 'click' event .

so HOW do i get the change event of 'data-value' ?

Answer 1

To detect changes to element attributes, you can use a MutationObserver

 const btn = document.querySelector("button"); const observer = new MutationObserver((mutationList) => { mutationList.forEach(({ attributeName, oldValue, target, type }) => { if (type === "attributes" && attributeName === "data-value") { console.log( `${attributeName} changed from '${oldValue}' to '${target.dataset.value}'` ); } }); }); observer.observe(btn, { attributes: true, attributeOldValue: true }); // Delegated event listener at <ul> document.querySelector("ul").addEventListener("click", ({ target }) => { const li = target.closest("li"); if (li) { const option = li.dataset.option; if (option !== undefined) { btn.dataset.value = option; } } });

 li { cursor: pointer; }

 <button data-value="">'click'</button> <ul> <li data-option="1">option1</li> <li data-option="2">option2</li> </ul>