vanilla javascript function based on screen resize-CodePudding

I am trying to execute a function by resizing the window. The function is changing the color of the body based on screen resizing. If the screen size is less than 500px body should be in 'Red', else it should be 'Green'. I wrote a function, but it is not working in resizing. It works only after refreshing the browser. I want to execute the function without refresh. Following is the code. Thanks in advance for anyone's help.

HTML:

<div class="trigger">Trigger</div>
<div class="content">This is the Toggle Displaying content</div>

JavaScript:

doit=()=>{
if(window.innerWidth<500) {
document.body.style.background="red";
}
else {
document.body.style.background="green";
}
}
doit();

CodePudding user response：

Try the following:

doit = () => {
    const fn = () => {
        if(window.innerWidth<500) {
            document.body.style.background="red";
        }
        else {
            document.body.style.background="green";
        }
    }
    fn()
    window.addEventListener('resize', fn)
}
doit();

CodePudding user response：

You need to add event listener on window resize

document.addEventListener("resize", function (e) {
    if(window.innerWidth<500) {
        document.body.style.background="red";
    } else {
        document.body.style.background="green";
    }
});