HTML onclick dropdown won’t work in mobile but works on desktop

I am working on a responsive multilingual website using purely HTML/CSS and JS. And how it switches language is using a dropdown which works really well on desktop, but when I load it on my mobile phone or just minimizing the size of my desktop browser to resemble a mobile resolution or even using the developer tools to load it like the mobile, the dropdown won’t work for some reason.

I made it console log when the JS is working to change the language, which it seems to work, but the CSS won’t change. Does anybody have any idea why?

I’ve tried changing JS function to something else that is not onclick and I’ve tried isolating the dropdown to a separate webpage and it still won’t work.

Here’s my code below.
Thanks in advance!

// same code for mobile and desktop view

function toggleDropdown() {
  const dropdownMenu = document.getElementById('dropdownMenu');
  if (dropdownMenu) {
    console.log("button clicked");
    console.log("class changed to", dropdownMenu.className);
    if (dropdownMenu.classList.contains('visible1')) {
      dropdownMenu.classList.remove('visible1');
      dropdownMenu.classList.add('hidden1');
    } else {
      dropdownMenu.classList.remove('hidden1');
      dropdownMenu.classList.add('visible1');
    }
    console.log("it is currently", dropdownMenu.className);
  } else {
    console.error("this element does not exist");
  }
}

window.onclick = function(event) {
  if (!event.target.matches('.lang img')) {
    const dropdowns = document.getElementsByClassName('dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.style.display === 'block') {
        openDropdown.style.display = 'none';
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .desktop-ui {
    display: none;
  }
  .mobile-ui {
    display: block;
    overflow-x: none;
  }
}

@media only screen and (min-width: 769px) {
  .desktop-ui {
    display: block;
  }
  .mobile-ui {
    display: none;
  }
}

.lang {
  position: absolute;
  z-index: 100;
  top: 35%;
  right: 19.5%;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
}

.lang img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.lang img:hover {
  opacity: 0.7;
  transition: ease-in-out 0.3s;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 160px;
  z-index: 1;
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

.dropdown-content a {
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 14px;
  letter-spacing: 2px;
  font-family: Semibold;
}

.dropdown-content a:hover {
  text-decoration: underline #2E75B6 1.5px;
  color: rgba(209, 209, 209, 0.8);
  transition: ease-in-out 0.5s;
}

.dropdown-content img {
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.dropdown-content img:hover {
  filter: drop-shadow(0px 0px 5px 0px rgba(0, 0, 0, 0.75));
  transition: ease-in-out 0.5s;
}

.mobile-ui .lang {
  position: absolute;
  z-index: 100;
  top: 40px;
  right: 20px;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
}

.mobile-ui .lang img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.mobile-ui .lang img:hover {
  opacity: 0.7;
  transition: ease-in-out 0.3s;
}

<div class="lang">
  <img src="//cdn.sstatic.net/sites/stackoverflow/img/favicon.ico" alt="Language Icon" onclick="toggleDropdown()" style="width: 35px;height: 35px;">
  <div class="dropdown-content" id="dropdownMenu">
    <a href="index.html"><img src="https://flagsapi.com/GB/flat/64.png">English</a>
    <a href="index.html"><img src="https://flagsapi.com/CN/flat/64.png">中文</a>
  </div>
</div>

I’ve tried changing the function and tried isolating the language switching dropdown into a separate webpage to see if other JS function is conflicting, it still doesn’t work.