Estoy tratando de ejecutar una función cambiando el tamaño de la ventana. La función cambia el color del cuerpo en función del cambio de tamaño de la pantalla. Si el tamaño de la pantalla es inferior a 500 px, el cuerpo debe estar en 'Rojo', de lo contrario, debe estar en 'Verde'. Escribí una función, pero no funciona en el cambio de tamaño. Funciona solo después de actualizar el navegador. Quiero ejecutar la función sin actualizar. A continuación se muestra el código. Gracias de antemano por la ayuda de cualquiera.
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();Prueba lo siguiente:
doit = () => { const fn = () => { if(window.innerWidth<500) { document.body.style.background="red"; } else { document.body.style.background="green"; } } fn() window.addEventListener('resize', fn) } doit();Debe agregar un detector de eventos en el cambio de tamaño de la ventana
document.addEventListener("resize", function (e) { if(window.innerWidth<500) { document.body.style.background="red"; } else { document.body.style.background="green"; } });