I am trying to detect changes on a particular element using the MutationObserver but it is not working. What am I doing wrong?

user_18903525 0
Viewed 205

I have been trying to log the updated cost information from an HTML document but have not been successful. I am sure it has to be that I am not using the mutation observer correctly. The js file is linked. Below is the HTML element that I am targeting.

HTML:

<span id="cost">0.00</span>

The JS file contains the following code:


const total = document.getElementById('cost');

console.log(total);
const options = {
  characterData: true
};

function logCallback(mutations) {
  console.log('called');

  for (let mutation of mutations) {
    if (mutation.type === 'characterData')
    {
      console.log('Mutation Detected: Price changed');
    }
  }
}

const observer = new MutationObserver(logCallback);

observer.observe(total.childNodes[0], options);
mutation-observers javascript
1 Answers

Your code would work if the code that was making the change changed the text node you're watching rather than destroying and replacing it, like this:

total.childNodes[0].nodeValue = "1.00";

Live Example:

const total = document.getElementById('cost');

const options = {
  characterData: true,
};

function logCallback(mutations) {
  console.log('called');

  for (let mutation of mutations) {
    if (mutation.type === 'characterData')
    {
      console.log('Mutation Detected: Price changed');
    }
  }
}

const observer = new MutationObserver(logCallback);

observer.observe(total.childNodes[0], options);

// Code that changes the element
total.childNodes[0].nodeValue = "1.00";
<span id="cost">0.00</span>

But the code making the change is probably destroying and replacing the child node, like this:

total.innerText = "1.00";

To handle that, you're probably best off watching for childList changes on the total element itself:

const total = document.getElementById('cost');

const options = {
  childList: true,
};

function logCallback(mutations) {
  console.log('called');

  for (let mutation of mutations) {
    console.log('Mutation Detected: Price changed');
  }
}

const observer = new MutationObserver(logCallback);

observer.observe(total, options);

// Code that changes the element
total.innerText = "1.00";
<span id="cost">0.00</span>

You may need to refine that (I removed the if checking only for characterData changes), and/or combine it with what you already had (in case some other code changes the text differently), but that's the main issue with what you had.

user_1572470
Related