I wanna display a console message when a value of a span attribute (data-value) is changed. The span got no ID so I iterate each class out of it. But when I tried to run, it always displayed an error. Here is the HTML:
<span class="wpsl-selected-item" data-value="50"></span>
and here is the JS:
var target = document.querySelectorAll('.wpsl-selected-item');
for (var i = 0; i < target.length; i++) {
create(target[i]);
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('heya')
});
});
var config = {
attributes: true,
attributeFilter: ['data-value']
};
observer.observe(target[i], config);
The error message is: Uncaught TypeError: MutationObserver.observe: Argument 1 is not an object. and I'm working on firefox
Any help would be very much appreciated, thank you!
does this work for you?
var target = document.querySelectorAll('.wpsl-selected-item');
if (target.length > 0) {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('heya')
});
});
var config = {
attributes: true,
attributeFilter: ['data-value']
};
for(var i = 0; i < target.length; i++) {
observer.observe(target[i], config);
}
}