Reputation: 879
How do I observe multiple elements with ResizeObserver like all textareas? Using document.querySelectorAll() results in an error.
var ro = new ResizeObserver( entries => {
for (let entry of entries) {
// do something
}
});
// Works
ro.observe(document.querySelector('textarea'));
// Doesn't work
ro.observe(document.querySelectorAll("textarea"));
Error: VM112:8 Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
at <anonymous>:8:4
Upvotes: 7
Views: 8853
Reputation: 5960
querySelectorAll
returns a NodeList
, you can use .forEach
to iterate over each and pass it into the observer:
const boxes = document.querySelectorAll('.box');
const myObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const width = Math.floor(entry.contentRect.width);
const height = Math.floor(entry.contentRect.height);
entry.target.value = `I'm ${ width }px and ${ height }px tall`;
}
});
boxes.forEach(box => {
myObserver.observe(box);
});
.box {
text-align: center;
border: 1px solid black;
height: 100px;
border-radius: 8px;
display: flex;
}
<textarea class="box">
</textarea>
<textarea class="box">
</textarea>
EDIT: You could also observe single element at a time but they need to be initialized individually:
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
new ResizeObserver(entries => {
const width = Math.floor(entries[0].contentRect.width);
const height = Math.floor(entries[0].contentRect.height);
entries[0].target.value = `I'm ${ width }px and ${ height }px tall`;
}).observe(box);
});
.box {
text-align: center;
border: 1px solid black;
height: 100px;
border-radius: 8px;
display: flex;
}
<textarea class="box">
</textarea>
<textarea class="box">
</textarea>
Upvotes: 13