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