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();

Are you expecting it change the styles automatically after your first run? — rrkjonnapalli, Oct 17 '22 at 05:37
@rrkjonnapalli Yes, I would like the style to update. I know that I currently have the function set to run on page load, but I assume there's an event listener I can add to run the function again anytime the screen width is changed. — Mance Rah, Oct 17 '22 at 05:52
https://stackoverflow.com/a/641874/7339040 try to call the function after you receive an event. — rrkjonnapalli, Oct 17 '22 at 06:13

score 1 · Answer 1 · answered Oct 17 '22 at 05:37

1

You have let in front of displaySize in your if/else statement, hence defining a new variables instead of using the one you declared in the first line.

answered Oct 17 '22 at 05:37

Musa

96,336
17
118
137

Thanks, this was a big issue and helped resolve my code. – Mance Rah Oct 17 '22 at 06:04

score 1 · Accepted Answer · answered Oct 17 '22 at 05:44

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();
}

Thanks a lot, your code really helped. Now I just need to add an event listener so that this function runs every time the window width is changed. — Mance Rah, Oct 17 '22 at 06:04
You can use window.addEventListener('resize', displaySizeReader); — DevTurtle, Oct 17 '22 at 06:47

Javascript won't properly add class to HTML element

2 Answers2