0

With the help of the following SO-post. I know it is possible to track multiple elements with a single MutationObserver-object. I want to track the text of two elements on a website, so I write the following script:

var seconds = document.getElementsByClassName('sr-lmt-0-ms-countdown__time srt-primary-7 srm-large')[2];
var minutes = document.getElementsByClassName('sr-lmt-0-ms-countdown__time srt-primary-7 srm-large')[3];


var callback = function(mutations) {
    for (var mutation of mutations) {
            // do something
            // console.log(mutation + (minutes or seconds));
        }
    };

var observer = new MutationObserver(callback);
var config = {characterData: true, subtree: true};

observer.observe(minutes, config);
observer.observe(seconds, config);

How can I alter this script so the Console shows which variable triggered the MutationObserver?

Edit

If I inspect mutation.target I see the following:

enter image description here

I don't see whether sec or minutes triggered the mutation? How can I make this distinguishing?

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
HJA24
  • 410
  • 2
  • 11
  • 33
  • `mutation.target` – Randy Casburn Nov 16 '21 at 14:58
  • 1
    Did you take a look at [the specification of `MutationObserver`](https://dom.spec.whatwg.org/#interface-mutationobserver)? It's all there. – Armen Michaeli Nov 16 '21 at 14:58
  • @RandyCasburn I added the output of `mutation.target`, but its still unclear to me – HJA24 Nov 16 '21 at 16:36
  • @amn, to be fair I did but I am struggling with it – HJA24 Nov 16 '21 at 16:38
  • This: "_How can I alter this script so the Console shows which variable triggered the MutationObserver?_" - where you have comments `//do something`, place `console.log(mutation.target)` - that should explicitly answer your question. – Randy Casburn Nov 16 '21 at 16:39
  • @RandyCasburn then the output shows only the integer that represents the second or, less frequently, the minute – HJA24 Nov 16 '21 at 16:48
  • I don't think I can help you any more than I have. First off, a `var` doesn't trigger a mutation event - an element in the DOM does. Second, if you see an integer that you know represents seconds, the event _must_ be caused by the DOM element that is referenced by the `seconds` variable and the same for the `minute` - can you make that connection? If you want the DOM element itself, it is in the `.parentElement` property of the `mutation.target`. Best of luck to you. – Randy Casburn Nov 16 '21 at 16:54
  • 1
    Thanks for your time sofar. I understand that an element triggers a mutation event. I defined two `vars`, each represent a different element in the DOM. I want to know which one does. If I inspect the text of both elements, it can be either one; a `1` can represent a second or a minute. If I look at the `.parentElement` property I see `sr-lmt-0-ms-countdown__time srt-primary-7 srm-large`. There are a total of 4 elements that are located using the above and `document.getElementsByClassName()`. How can we identify mutation events caused by either `minutes` or `seconds`? I don't see how – HJA24 Nov 16 '21 at 17:44
  • Add a custom `data-` attributes to the elements - then `mutation.target.parentElement.dataset` - test for the name. – Randy Casburn Nov 16 '21 at 20:47
  • thank you very much!! – HJA24 Nov 16 '21 at 20:49

1 Answers1

-1

let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords); // console.log(the changes)
});
user2962010
  • 7
  • 2