Geek Answers Handbook

MutationObserver does not work for children

Sorry in advance that this is probably a simple question and terrifying javascript below;

My problem is this: there is a banner on the site that goes through four images every few seconds. I am trying to click the “impression” on the DataLayer that GTM will select. To display the next image, it was made (not by myself) to change the z-index from 0 to 1 of the next banner image. At first I tried to get the mutation observer to work with only one image. This worked, but I soon found out that the z-index value actually changes by about 3 times before settling by 1, so it was shown three times three times each time. Ideally, however, I would like it to work by looking at the parent div (and watching the child list) and only running one show on the banner image, but when I try it, it just says: “Providedthat node is null, "I wonder, is it because only the style attributes of the children change and nothing else?

HTML banner (when Pane2 image is displayed);

<div id="rotator_10690" class="imageRotator Homepage_Middle_Banner_Rotator">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane1" style="left: 0px; top: 0px; position: absolute; z-index: 0; opacity: 1; display: none;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane2" style="left: 0px; top: 0px; position: absolute; z-index: 1;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane3" style="left: 0px; top: 0px; position: absolute; z-index: 0; display: none;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane4" style="left: 0px; top: 0px; position: absolute; z-index: 0; display: none;">
Run codeHide result

My script for parent div

<script>
// select the target node
var target = document.querySelector('.rotator_10690');

//call mutation observer api
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      if(mutation.type==="attributes" && mutation.target.className.indexOf("imagePane")) {
         observer.disconnect();
         dataLayer.push({'event': 'paneImpression'});

      }
  });
});
 
var disconnect = observer.disconnect();
// configuration of the observer:
// pass in the target node, as well as the observer options
var config = { attributes: true, childList: true }
observer.observe(target, config);
Run codeHide result

And only for imagePane2 (I tried mutations.some here with a false return to try to stop it after it got the first mutation, but that didn't work. I also had zIndex === "1" here but it still meant that 3 or more readings are triggered each time.)

<script>
// select the target node
var target = document.querySelector('.imagePane2');

//call mutation observer api
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.some(function(mutation) {
      if(mutation.type==="attributes" && mutation.target.className.indexOf("imagePane2")) {
         observer.disconnect();
         dataLayer.push({'event': 'paneImpression', 'pane': 'two'});

         return false;

      }
  });
});
 
var disconnect = observer.disconnect();
// configuration of the observer:
// pass in the target node, as well as the observer options
var config = { attributes: true }
observer.observe(target, config);


 

</script>
Run codeHide result

Any help that could be offered would be greatly appreciated, I tried to look everywhere, but could not get anything to work.

thank

+4
source share
1 answer
{ attributes: true, childList: true }

- .rotator_10690 - , . childList , .

, , DOM ,

subtree: true
+6

More articles:


All Articles