Javascript won't properly add class to HTML element

Question

I've written scripts before that target HTML elements and add or remove classes based on conditions before, but this current script always adds mobile-class no matter what the display width of my window is. The console.log correctly outputs desktop at window widths above 992px, but the class doesn't correctly change. If I manually set the top statement to equal to desktop, then the classes update accordingly, so it seems that my displaySizeReader isn't correctly assigning a value to my displaySize variable. Where is the break in my logic here?

let displaySize = '';

function changeToMobile() {
    document.querySelector('.custom-menu-class').classList.remove('desktop-class');
    document.querySelector('.custom-menu-class').classList.add('mobile-class');
}

function changeToDesktop() {
    document.querySelector('.custom-menu-class').classList.remove('mobile-class');
    document.querySelector('.custom-menu-class').classList.add('desktop-class');
}

function displaySizeReader() {
    if (screen.width < 992) {
        let displaySize = 'mobile';
        console.log(displaySize);
    }
    else {
        let displaySize = 'desktop';
        console.log(displaySize);
    }

    function displayChanger() {
        if(displaySize == "mobile") {
            changeToMobile();
        } else if(displaySize == "desktop") {
            changeToDesktop();
        } else {
            changeToMobile();
        }
    }
    displayChanger();
}

displaySizeReader();

Answer 1

The screen object is not going to change unless you are using different displays. If you are trying to change these classes for a responsive type of scenario, the following should help you.

Make this change:

function displaySizeReader() {
    if (window.innerWidth < 992) {
        displaySize = 'mobile';
        console.log(displaySize);
    }
    else {
        displaySize = 'desktop';
        console.log(displaySize);
    }

    function displayChanger() {
        if(displaySize == "mobile") {
            changeToMobile();
        } else if(displaySize == "desktop") {
            changeToDesktop();
        } else {
            changeToMobile();
        }
    }
    displayChanger();
}