CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
idlehand
idlehand

Reputation: 421

Using mutation observer to watch CSS class error: (parameter 1 is not type 'Node')

I'm trying to observer a CSS class on a page and when it changes (it changes automatically without a page refresh, as players score points) post those changes into the console, to start.

Right now, I'm getting the scores column correctly, after the page full loads. Accessing scores[i].innerText gives me the numbers I need. Now, I want to observe those numbers on the page to detect when one of them change.

Currently, the code fails on observer.observe(scores, config); **failing here** (parameter 1 is not type 'Node') I thought this may be because nothing is there yet, but scores is populated in the observePull(); function after the window completely loads.

The observePull function works as expected and prints out the scores and player names.

var scores = [];
var players;
var previousScores = [];

window.onload = function(){
  observePull(); **this function is shown below**

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

      console.log("Mutation fired");
      //code to then find the score that changed and print the notification with the player name
    });
  });

  //wasn't sure which of these would be needed
  var config = { attributes: true,
    characterData: true,
    childList: true,
    subtree: true
  };

  observer.observe(scores, config); **failing here**  (parameter 1 is not type 'Node')
}

function observePull(){     
  scores = document.querySelectorAll(".jsx-2810852873.table--cell.border-right.total.tar");
  players = document.querySelectorAll(".jsx-1120675750.player-column__bio");

    if(players[0] != null){
      for(var i=0; i<9; i++){
        previousScores[i] = scores[i+1].innerText;
        console.log(players[i].innerText + " " + previousScores[i]);
      }
    }
}

Upvotes: 0

Views: 163

Answers (1)

Ouroborus
Ouroborus

Reputation: 16865

According to the MDN entry for MutationObserver.observe(), the first argument needs to be a node that you want to watch for changes.

This means you'll either need to observe a common parent node (along with options {childList:true, subtree:true} to get events for the children) or you'll need to iterate over scores, applying .observe() to each node individually.

Upvotes: 1

Related Questions