Разрешение экрана

[Сергей Ракипов]

Как сделать что бы запускалась функция при определённом разрешение

let navHover = document.querySelector(".nav_hover");
let navListDescop = document.querySelector(".navig:nth-child(10)");
let navListPhone = document.querySelector(".navig:nth-child(2)");
let descop = document.querySelector(".navig:nth-child(10)");
let phone =document.querySelector(".navig:nth-child(2)");


navHover.onmouseover = navOn;
navHover.onmouseout = navOff;
navListDescop.onmouseover = navListOn;
navListDescop.onmouseout = navListOff;

function navOn(){
	descop.style.top = "320px";
}
function navOff(){
	descop.style.top = "-360px";
}
function navListOn(){
	descop.style.top = "320px";
}
function navListOff(){
	descop.style.top = "-360px";
}

function test(){
	if (document.documentElement.clientWidth > 860) {
		navHover.onmouseover = navOn2;
		navHover.onmouseout = navOff2;
		navListPhone.onmouseover = navListOn2;
		navListPhone.onmouseout = navListOff2;

		function navOn2(){
			phone.style.marginTop = "0px";
		}
		function navOff2(){
			phone.style.marginTop = "-1500px";
		}
		function navListOn2(){
			phone.style.marginTop = "0px";
		}
		function navListOff2(){
			phone.style.marginTop = "-1500px";
		}
	}
}

test();

особенность в том navHover это один и тот же блок

[рони]

Сергей Ракипов,

addEventListener( "resize", test)

[Сергей Ракипов]

addEventListener( "resize", test)

Я так и сделал но функции срабатывают только если были изменение а если просто открыто то не чего.

let navHover = document.querySelector(".nav_hover");
let navListDescop = document.querySelector(".navig:nth-child(10)");
let navListPhone = document.querySelector(".navig:nth-child(2)");
let descop = document.querySelector(".navig:nth-child(10)");
let phone =document.querySelector(".navig:nth-child(2)");

function test(){
    if (document.documentElement.clientWidth < 860) {
        navHover.onmouseover = navOn2;
        navHover.onmouseout = navOff2;
        navListPhone.onmouseover = navListOn2;
        navListPhone.onmouseout = navListOff2;

        function navOn2(){
            phone.style.marginTop = "0px";
        }
        function navOff2(){
            phone.style.marginTop = "-1500px";
        }
        function navListOn2(){
            phone.style.marginTop = "0px";
        }
        function navListOff2(){
            phone.style.marginTop = "-1500px";
        }
    }
}

addEventListener( "resize", test);

function test2(){
	if(document.documentElement.clientWidth > 860){
		navHover.onmouseover = navOn;
		navHover.onmouseout = navOff;
		navListDescop.onmouseover = navListOn;
		navListDescop.onmouseout = navListOff;

		function navOn(){
			descop.style.top = "320px";
		}
		function navOff(){
			descop.style.top = "-360px";
		}
		function navListOn(){
			descop.style.top = "320px";
		}
		function navListOff(){
			descop.style.top = "-360px";
		}
	}
}

addEventListener( "resize", test2);

[voraa]

Ну значит надо еще вызывать эти функции при открытии страницы.

addEventListener( "resize", () => {test(); test2()} );
addEventListener( "load", () => {test(); test2()} )

[Сергей Ракипов]

addEventListener( "resize", () => {test(); test2()} );
addEventListener( "load", () => {test(); test2()} )

Тут написано, слушай событие, в скобках какое, первое значение перед запятой это изменение и загрузка, после запятой втрое значение,
мне не понятно что значат круглые скобки

объясните если не сложно

[рони]

мне не понятно что значат круглые скобки

место для аргументов функции
() => {}
тоже самое, что
function (){}

[Сергей Ракипов]

Понял спасибо