How can I fix my code to get the functions to make the dropdown menu work?

Question

I am creating a clickable dropdown menu for my website and I can't seem to get the "dropdown" part of the code to work. The functions are intact when using console.log to test.

I am not quite sure where in my code I am missing something in order for the functions to do what they should be doing, which is to have the menu dropdown. The links just appear below the dropdown button. I provide my code below. I also have a css stylesheet.

  <header class="topheader">
      <div id="dropdown">
        <button onclick="myFunction()"id="dropbtn">Menu</button>
        <div id="myDropdown" id="dropdown-content">
          <a href="About Me.html">About Me</a>
          <a href="Featured Works.html">Featured Works</a>
        </div>
      </div>
      <script>

      function myFunction() {
        console.log("test");
       document.getElementById("myDropdown").classList.toggle("show-content");`
      }

      window.onclick = function(event){

        console.log("test");
        if (!event.target.matches('dropbtn')) {
          var dropdowns =
        document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i <
          dropdowns.length; i++) {
              var openDropdown =
          dropdowns[i];
              if (openDropdown.classList.contains("show-content")) {
                openDropdown.classList.remove("show-content")

              }
          }

        }
      }
    </script>
    </header>

Answer 1

Check the id of the myDropdown div.

You are querying for document.getElementsByClassName("dropdown-content");

But according to your div you set the ID twice I guess you meant to set the class to dropdown-content