Сам я новичок в этом деле, возможно делаю нелепые ошибки. Проблема у меня в том, что цвет кнопки меню по-моему должен меняться только при клике на него, но цвет меняется с установленного css на установленный js сразу же после открытия страницы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta description="just menu">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" href="images/icon.png">
<title>Menu</title>
</head>
<body>
<div class="div1">
<h1>Menu</h1><br>
<button class="button_in_menu"><h2>Main<h2></button><br>
<button class="button_in_menu"><h2>About us</h2></button>
</div>
<div id="div2">
<button class="button_of_menu" id="but2">
<hr class="lines" id="hr1">
<hr class="lines" id="hr2">
<hr class="lines" id="hr3">
</button>
</div>
<script src="scripts/menu.js"></script>
</body>
</html>
.div1 {
background-color: #21252B;
position: absolute;
width: 300px;
height: 100%;
margin: 0;
text-align: center;
color: white;
padding-top: 50px;
left: 0px;
top: 0px;
}
.button_in_menu {
margin-top: 10px;
background-color: #FD4F55;
border-color: #FD4F55;
width: 200px;
height: 75px;
}
.button_in_menu:hover {
background-color: white;
border-color: white;
}
#div2 {
position: absolute;
background-color: white;
border-radius: 5px;
border-color: white;
padding: 10px;
width: 100px;
height: 100px;
left: 310px;
}
.button_of_menu {
width: 100px;
height: 100px;
background-color: #21252B;
border-color: #21252B;
}
.lines {
width: 60px;
height: 3px;
margin-top: 20px;
margin-bottom: 20px;
color: white;
}
html {
background-image: url(images/background.jpg);
}
let but2 = document.getElementById ("but2");
let div2 = document.getElementById ("div2");
let hr1 = document.getElementById ("hr1")
let hr2 = document.getElementById ("hr2")
let hr3 = document.getElementById ("hr3")
function rotateMenu () {
but2.style.backgroundColor = "white";
div2.style.backgroundColor = "#21252B";
hr1.style.backgroundColor = "black";
hr2.style.backgroundColor = "black";
hr3.style.backgroundColor = "black";
}
but2.onclick = rotateMenu ();
