Im pretty new to programming and im trying to develop a chrome extension. The website that im trying to manipulate has a div element and within this div are multiple divs and the number of these divs vary depending on the scale of the first div and the scale is draggable by the user. My problem is that, I need to declare each of these variables and have a mutation observer observe them for changes. So if a user has 8 div in there, each div should be declared as a variable and have a mutation observer observing it. Below is my code:

function tester() {
  var child = document.querySelector("#__APP > div > div:nth-child(3) > div > div > div.react-grid-layout.layout > div:nth-child(5) > div > div.css-q57e4p > div > div > div.list-container.css-1kq4s3b > div.list-auto-sizer > div > div");
  var childnodesofchild = [child.childNodes];
  var divs = [];
  console.log(childnodesofchild[0]);
  childnodesofchild[0].forEach(consoler);

  function consoler() {
    //this is the problem
    span1 = document.getElementsByClassName("text right")[0];
    const observer = new MutationObserver(function(mutations) {

      mutations.forEach(function(mutation) {
        var spantext = span1.textContent;
        var spandiv = span1.parentNode;

        if (mutation.addedNodes) {
          if (spantext > avg) {
            spandiv.style.backgroundColor = "#E8E8E8"
            spandiv.style.color = "black";
            spandiv.style.opacity = "0.7";
          }

          if (spantext < avg) {
            spandiv.style.backgroundColor = "black";
            spandiv.style.color = "white";
            spandiv.style.opacity = "1";
          }
        }
      })
    });

    const options = {
      childList: true,
      subtree: true,
      attributes: true,
      characterData: true
    };

    observer.observe(span1, options);
  }
}

CodePudding user response：

I am still not 100% sure what your question is. But here, I wrote a quick example of how you can declare a few divs in a loop and mess with its properties in a loop. I hope this is helpful.

let colors = ['red','green','blue'];
let innerText = ['A','B','C'];

for (let i = 0; i < colors.length; i  ) {
  let testDiv = document.createElement('div');
  testDiv.className = 'test';
  testDiv.style = 'width: 100px; height: 50px; line-height: 50px; text-align: center; color: white;';
  testDiv.style.backgroundColor = colors[i];
  testDiv.innerHTML = innerText[i];
  document.body.appendChild(testDiv);
}

document.getElementById('testBtn').onclick = function() {
  let testDivs = document.querySelectorAll('.test');

  for (let i = 0; i < testDivs.length; i  ) {
    testDivs[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
}

<button id="testBtn">Change Div Colors</button>