I am facing an issue with using ResizeObserver on multiple elements within my page. When triggering the same function call on the resized element, the function seems to be receiving empty objects instead of DOM objects.
For example...
<div id="test" class="rg_toggle">Test</div>
...the following code snippet is causing problems:
function fixToggle( toggleElement) {
alert(JSON.stringify(toggleElement, ["id", "className"));
}
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
fixToggle(entry)
}
});
const toggles = document.querySelectorAll('.rg_toggle');
toggles.forEach(toggle => {
resizeObserver.observe(toggle);
});
Whenever I run this code, only {} is displayed in the alert dialog, whereas I was expecting to see the id and classname. You can check out my CodePen for reference.