При нажатии на 1-й элемент, изменить стиль второго элемента

Question

Я разместил свои CSS, HTML и JS (что является проблемой для меня).Я хочу изменить CSS «nav» с помощью JS, но только при нажатии на «кнопку».

Вот почему я написал JS как есть, но, вероятно, это неправильно, так как это не таксделать что-нибудь.

Я показываю кнопку только на ширине менее 700 пикселей, именно тогда я хочу, чтобы пользователь нажал на кнопку, чтобы открыть полноэкранную навигацию, которая ранее была встроенной

document.getElementById("button").onclick = function() {
        document.getElementById("nav").style.display = "block";
    }

#button {
  display:none;
}
nav {
  position: sticky;
  width: 100%;
  background-color: blueviolet;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width:700px){
  #button{
    display: block;
    font-size: 8vmax;
    color: #fff;
    margin-right: 5%;
  }
  nav {
    position: absolute;
    left:0px;
    top: 0px;
    width:100%;
    height:100%;
    display: flex;
    flex-direction:column;
    justify-content: space-evenly;
    display:none;
  }

<button id="button">☰</button> 
  <nav id="nav">
    <div class="nav-text"><a href="#">DOMOV</a></div>
    <div class="nav-text"><a href="#">DOMOV</a></div>
    <div class="nav-text"><a href="#">DOMOV</a></div>
    <div class="nav-text"><a href="#">DOMOV</a></div>
    <div class="nav-text"><a href="#">DOMOV</a></div>
  </nav>

РЕДАКТИРОВАТЬ # 1: изменено «document.getElementsById (« кнопка »). Onclick = function ()« на »document.getElementById (кнопка« »") .onclick = function ()"

Answer 1

Надеюсь, это поможет вам.спасибо

function myFunction() {
  var nav = document.getElementById("nav");
  nav.classList.toggle("mystyle");
}

#button{
    display:none;
}   

nav{
    position: sticky;
    width: 100%;
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width:1000px){
    #button{
        display: block;
        font-size: 8vmax;
        color: #fff;
        margin-right: 5%;
    }
    nav{
        position: absolute;
        left:0px;
        top: 100px;
        width:100%;
        height:100%;
        display: flex;
        flex-direction:column;
        justify-content: space-evenly;
        display:none;
    }
    .mystyle{
    display:flex;}
    }

<button id="button" onclick="myFunction()">
         ☰
    </button> 
    <nav id="nav">
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
    </nav>

Answer 2

В вашем javascript есть ошибка опечатки, она должна быть getElementById.и вы должны прослушивать события click в кнопке, используя addEventListener

document.getElementById("button").addEventListener('click',function() {
    document.getElementById("nav").style.display = "block";
});

#button{
    display:none;
}   

nav{
    position: sticky;
    width: 100%;
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width:700px){
    #button{
        display: block;
        font-size: 8vmax;
        color: #fff;
        margin-right: 5%;
    }
    nav{
        position: absolute;
        left:0px;
        top: 0px;
        width:100%;
        height:100%;
        display: flex;
        flex-direction:column;
        justify-content: space-evenly;
        display:none;
    }

<button id="button">
         ☰
    </button> 
    <nav id="nav">
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
    </nav>