Close dropdown menu when clicked on different dropdown-CodePudding

I wrote this HTML to create 2 dropdowns :

window.onclick = function(event) {
  var targ = event.target;
  var drp = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < drp.length; i  ) {
    if (drp[i].previousElementSibling == targ) {
      targ.nextElemntSibling.classList.toggle("active");
      targ.nextElemntSibling.classList.toggle("show");
    } else {
      drp[i].classList.remove('show');
      drp[i].previousElementSibling.classList.remove('active')
    }
  }
}

.searchGrid {
  display: flex;
  grid-template-columns: repeat(4, 25%);
  gap: 30px;
  place-items: center;
}


/* CHOOSE CITY*/

.chooseCity {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd
}

.show {
  display: block;
}


/* CHOOSE YEAR*/

.chooseyear {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd
}

.show {
  display: block;
}

<div class="searchGrid">
  <div class="chooseCity">
    <button onclick="CityFunc()" class="dropbtn">Choose city</button>
    <div id="cityDropdown" class="dropdown-content">
      <a href="#">Los Angeles</a>
      <a href="#">New York</a>
      <a href="#">Toronto</a>
      <a href="#">Las Vegas</a>
    </div>
  </div>
  <div class="chooseyear">
    <button onclick="yearFunc()" class="dropbtn">Choose year</button>
    <div id="yearDropdown" class="dropdown-content">
      <a href="#">1960</a>
      <a href="#">1970</a>
      <a href="#">1980</a>
    </div>
  </div>
</div>

I found the JavaScript function which should close the dropdowns when I click on a different location in the website

But, When I click on the "Choose city" button, it opens the dropdown and when I click on the "Choose year" button, it will close the "Choose city" dropdown and open the new one, like it should.

For some reason when I click on the "Choose year" button and then click on the "Choose city", it will open the "Choose city" dropdown but won't close the "Choose year"

What am I missing here?

CodePudding user response：

You have one mistake targ.nextElemntSibling it return undefined. Also not declared functionsCityFunc() yearFunc(). See correct example in here

window.onclick = function (event) {
  var targ = event.target;
  var drp = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < drp.length; i  ) {
    if (drp[i].previousElementSibling === targ) {
      drp[i].classList.toggle("show");
      drp[i].previousElementSibling.classList.toggle("active");
    } else {
      drp[i].classList.remove("show");
      drp[i].previousElementSibling.classList.remove("active");
    }
  }
};