im trying to change the background color of this <li>
element but I’m getting error Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor')
. i have been trying to fix this for hours but nothing works. As you can see, I want it to change the background color of the rows element in an if statement and below is my JS code.
var vals;
var rows;
var sum;
var rowsarr = [];
var avg;
function obser1() {
const trades = document.querySelector('.scrollbar-dark');
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.addedNodes.length) {
vals = [...mutation.addedNodes[0].querySelectorAll("span")].map(span => span.textContent);
if (vals.length == 4) {
rows = vals[2];
rowsarr.push(rows);
}
if (vals.length == 3) {
rows = vals[1];
rowsarr.push(rows);
}
console.log(mutation.addedNodes[0]);
console.log(rows+" rows");
}
})
function arraysum(x, y) {
return parseFloat(x) + parseFloat(y);
}
sum = rowsarr.reduce(arraysum);
console.log(rowsarr.length + " length");
if (rowsarr.length >= 100 && rowsarr.length<105) {
avg = sum / 50;
console.log("average is " + avg);
}
/*This is the problem*/
if (rows > avg) {
console.log(rows + " large" + " average " + avg);
rows.style.backgroundColor = "white";
}
});
observer.observe(trades, {
childList: true,
subtree: true,
attributes: true,
characterData: true
})
}
window.setTimeout(btn4, 1000);
window.setTimeout(obser1, 1700);