JavaScript element background color not changing on the web page

Question

I'm trying to change the background color of an <li> element but its not working. I'm not getting an error just that the color doesn't change on web page. I have tried multiple approaches such as assigning the element a class name and having that classname in CSS and also linesin[0].style.backgroundColor = "white" but non is working. below is my JS code:

var vals;
var rows;
var sum;
var rowsarr = [];
var avg;
var lines;
var linesin = [];
    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);
                    lines = [...mutation.addedNodes[0].querySelectorAll("li")];
                    if (vals.length == 4) {
                        rows = vals[2];
                        rowsarr.push(rows);
                    }
                    if (vals.length == 3) {
                        rows = vals[1];
                        rowsarr.push(rows);
                    }
                    linesin.push(mutation.addedNodes[0]);
                    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<115) {
                avg = sum / 50;
                console.log("average is  " + avg);
            }
            /*This is the problem*/
            if (rows > avg) {
                console.log(rows + "  large" + "  average  " + avg);
                console.log(linesin[0]);
                linesin[0].className = "large";
            }
        });
        observer.observe(trades, {
            childList: true,
            subtree: true,
            attributes: true,
            characterData: true
        })

and below is my CSS:

.large{
    background-color:whitesmoke !important;
}

Thank you.

Answer 1

use addClass property

 linesin[0].querySelector('li').addClass('large');