I want to fix clicking menu button problems

Question

To hide the menu when I click on windows or scroll, I tried like this.

var flag=0;

function myFunction(x) {
    x.classList.toggle("change");
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
    if (flag==0) {
        flag=1;
    }
    else if (flag==1) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
        var menu_btn = document.getElementsByClassName("menu_btn");
        var i;
        for (i = 0; i < menu_btn.length; i++) {
          var openDropdown = menu_btn[i];
          if (openDropdown.classList.contains('change')) {
            openDropdown.classList.remove('change');
          }
        }
        flag=0;
    }
}
window.addEventListener("scroll", function() {
    if (flag==1) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
        var menu_btn = document.getElementsByClassName("menu_btn");
        var i;
        for (i = 0; i < menu_btn.length; i++) {
          var openDropdown = menu_btn[i];
          if (openDropdown.classList.contains('change')) {
            openDropdown.classList.remove('change');
          }
        }
        flag=0;
    }
});

function menuclick(underline) {
    var focused = document.getElementsByClassName("focused");
    var i;
    for (i = 0; i < focused.length; i++) {
        var under = focused[i];
        if (under.classList.contains('focused')) {
            under.classList.remove('focused');
        }
    }
    if (!underline.parentElement.classList.contains('focused')) {
        underline.parentElement.classList.add('focused');
    }
}

My html is like this.

<div class="navbar bg-dark pt-3 pb-0 pl-4 pr-0 fixed-top">
    <div class="navbar-brand float-left">
        <a href="#"><img src="assets/img/logo.png"></a>
    </div>
    <div class="float-right mr-4 menu-bar">
        <a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
        <a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
        <a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
        <a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
    </div>
    <div class="dropdown-btn">
        <div class="menu_btn" onclick="myFunction(this)">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
        <div id="myDropdown" class="dropdown-content">
            <a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
            <a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
            <a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
            <a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
        </div>
    </div>
</div>

And css is like this.

a {
    text-decoration: none;
}
a:hover {
    cursor: pointer;
}
.a-border {
    display: inline-block;
    position: relative;
    color: white;
    padding: 0.5rem 0.25rem;
    margin: 0 1.5rem;
    overflow: hidden;
}
.a-border::after {
    content: url("../img/more-btn-bottom.png");
    display: block;
    position: absolute;
    bottom: 0;
    left: -0.25rem;
    border: none;
    transform: scale(0, 1);
    transform-origin: 0% 100%;
    transition: transform 0.4s;
}
a:hover .a-border::after {
    transform:scale(1, 1);
}
a.focused .a-border::after {
    transform: none;
}
.banner {
    position: relative;
    z-index: 2;
}
.menu-bar {
    z-index: 3;
}
.menu-btn {
  display: inline-block;
  cursor: pointer;
  z-index: 3;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.dropdown-btn {
  position: relative;
  display: inline-block;
  z-index: 3;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 20px;
  background-color: #343a40;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
}

.show {display: block;}
@media screen and (min-width: 780px) {
    .menu-bar {
        display: block;
    }
    .dropdown-btn {
        display: none;
    }
}
@media screen and (max-width: 779px){
    .menu-bar {
        display: none;
    }
    .dropdown-btn {
        display: block;
    }
}

If you try this code, you can find when you click window once, then the button doesn't work. When I click windows once, dropdown showed when I click the button twice. I want to solve this. I think you know more than me, so I want someone to solve this.

Answer 1

you can add event.stopPropagation to the menu button click.

<div class="menu_btn" onclick="event.stopPropagation(); myFunction(this)">

that way when you click the button you won't also click the window below.

Answer 2

I have solved this question by editing myfunction. My code is bellow.

function myFunction(x) {
    x.classList.toggle("change");
    document.getElementById("myDropdown").classList.toggle("show");
    flag=0;
}

Thank you for your help.