Why is my font size not adjusting with vanilla js?-CodePudding

I have this little code here and by the console logs I can see it is apparently changed but on the display it is not changing. What could be going wrong ?

JS vanilla below

const gameItem = document.querySelectorAll('.game-item');
const gameItemS = document.querySelector('.game-item');

document.addEventListener('DOMContentLoaded', () => {
    titleSize(gameItem);
});

const titleSize = (gameItem) => {
    [...gameItem].forEach((title) => {
        let textSize = window
            .getComputedStyle(title, null)
            .getPropertyValue('font-size');
        let gameTitle = title.innerText;
        // console.log(gameTitle, gameTitle.length, textSize);
        if (gameTitle.length > 7) {
            textSize = '5px';
            console.log(
                'The font on this was changed: '   gameTitle,
                gameTitle.length,
                textSize
            );
        }
    });
};

html below

            <section >
                <h1>Games</h1>
                <ol >
                    <li >Halo<img src="" /></li>
                    <li >Pokemon<img src="" /></li>
                    <li >
                        Animal Crossing<img src="" />
                    </li>
                    <li >Genshin Impact<img src="" /></li>
                    <li >Skyrim<img src="" /></li>
                </ol>
            </section>

CodePudding user response：

Assigning to textSize just changes the value of that variable, it doesn't have any effect on the element. When you do let textSize = /*...*/.getPropertyValue('font-size');, that just copies the value from the computed style object into the variable. There's no ongoing link between the variable and that computed style object. (Even if there were, assigning to the computed style object won't change the element.)

To change the element's style, you'd have to assign to title.style.fontSize (or title.style["font-size"]):

const gameItem = document.querySelectorAll('.game-item');
const gameItemS = document.querySelector('.game-item');

document.addEventListener('DOMContentLoaded', () => {
    titleSize(gameItem);
});

const titleSize = (gameItem) => {
    [...gameItem].forEach((title) => {
        let textSize = window
            .getComputedStyle(title, null)
            .getPropertyValue('font-size');
        let gameTitle = title.innerText;
        // console.log(gameTitle, gameTitle.length, textSize);
        if (gameTitle.length > 7) {
            title.style.fontSize = '5px';
            console.log(
                'The font on this was changed: '   gameTitle,
                gameTitle.length,
                textSize
            );
        }
    });
};

<section >
    <h1>Games</h1>
    <ol >
        <li >Halo<img src="" /></li>
        <li >Pokemon<img src="" /></li>
        <li >
            Animal Crossing<img src="" />
        </li>
        <li >Genshin Impact<img src="" /></li>
        <li >Skyrim<img src="" /></li>
    </ol>
</section>