I am trying to make a responsive nav bar – Blancer.com Tutorials and projects

I have the idea of having the anchor tags show up when they’re set to active and I have tried using JavaScript to access them and make them active when clicking on a div/button (I tried with button but it didn’t work out.).

The problem is that nothing happens. I ran through my code and didn’t find where I can be wrong.

Index.html:

<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="ResponsiveMenu.js" defer></script>
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js" ></script>
</head>
<body>
<center>
<nav class="nav">
        <div class="dot_a" style="pointer-events: none;">
        <span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
        <span class="dot" style="background-color: #ff4757;"></span>
        <span class="dot" style="background-color: #ffa502"></span>
        <span class="dot" style="background-color: #2ed573;"></span>
        </div>
        <a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a>
        <a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a>
        <a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a>
        <a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a>
        <a class="anchors" href="#""><i class="far fa-address-card"></i>&nbsp;&nbsp;ЗА НАС</a>  
    </nav>
</center>
<center>


</body>
</html>

IndexStyle.css:

body {
    background-image: url(1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
    margin: 0;
}

.pro_column1{
  width: 15%;
}

.pro_column2{
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
    /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
    /*border: solid black 2px;*/

}


.nav a {
  /*float: right;*/
  color: #747d8c;
    /*display: block;*/
  text-align: center;
    padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
    margin: 0;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
    /*position: fixed; /* or absolute */
}

.anchors {
   /*float: right;*/
  color: #747d8c;
    /*display: block;*/
  text-align: center;
    padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
    margin: 0;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
    /*position: fixed; /* or absolute */
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;

}

.dot_a{
  /*float: right;*/
  color: #747d8c;
    /*display: block;*/
  text-align: center;
    padding: 30px 10px;
  text-decoration: none;
  font-size: 17px;
    margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
    /*position: fixed; /* or absolute */
}

i {
    /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 32px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


@media screen and (max-width: 870px) {
  .nav a{
    display: none;
    padding-top:5px;
    padding-bottom:5px;
  }

  div.dot_a{
    padding-top: 3px;
    padding-bottom: 0px;
  }

  .nav {
    width: 90%;
  }
  .dot{
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .nav a:active {
    display: block ;
  }

}

ResponsiveMenu.js:

const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.аnchors');

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
})