Website Dropdown Menu Function Not Working in JavaScript

Question

I am web developing on replit and my button for dropdown menu is returning

ReferenceError: dropdown is not definedhttps://59b81476-925b-4a14-9d8a-26727de7f565.id.repl.co/:1
at HTMLButtonElement.onclick (https://59b81476-925b-4a14-9d8a-26727de7f565.id.repl.co/:1:447)

I have changed around the variables and thought that adding return to the code would work but it has not helped. All I want is to drop down the list of href.

function dropdown() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    return i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      return openDropdown;
      if (openDropdown.classList.contains('show')) {
        return openDropdown.classList.remove('show');
      }
    }
  }
}

.container {
  position: fixed;
  display: inline-block;
  top: 5%;
  left: 5%;
}

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

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

.dropbtn:hover,
.dropbtn:focus {
  background-color: #222a2f;
}

.dropdown {
  position: fixed;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  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 a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

<html>

<body>
  <div class="container">
    <div class="dropdown">
      <button onclick="dropdown(this)" class="dropbtn">
       <div class="bar1"></div>
       <div class="bar2"></div>
       <div class="bar3"></div>
     </button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#home">Home</a>
        <a href="#contact">Contact</a>
        <a href="#work-experience">Work Experience</a>
        <a href="#website-code">Website Code</a>
      </div>
    </div>
</body>

</html>

Again I added return at the end of the function, checked variable names, and none worked. Could it perhaps be an error with replit or what area is wrong?

Here is my full code/website for a more accurate representation: https://replit.com/@JordanBouckley/MyWebDev?v=1 — BouckleyBoy, Jan 21 '23 at 03:01

Table · Answer 1 · 2023-01-25T21:00:00.857

Try this, with onclick in the page, the dropdown menu is opened or closed by changing the class with toggle, with this condition:
If includes detects if the values inside the [ ]array match the target class (this is for the button, the array can contain more classes or id). Or if the target has an undefined href and also myDropdown already has the class dropdown-content show( this is for when the user clicks outside, it closes ).
And it won't close when you click inside the dropdown menu

const myDropdown = document.getElementById("myDropdown");

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    
    if (["dropbtn", "bar1", "bar2", "bar3"].includes(event.target.className) == true || event.target.href == undefined && myDropdown.className == "dropdown-content show") {
        
        myDropdown.classList.toggle('show');
        
    }
};

body{
  background-color: #ebecee;
}
.container {
  position: fixed;
  display: inline-block;
  top: 5%;
  left: 5%;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: 0.4s;
}
.dropbtn:hover > div,
.dropbtn:focus > div{
  background-color: white;
}
.dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #222a2f;
}

.dropdown {
  position: fixed;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  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 a:hover {background-color: #ddd;}

.show {display: block;}

<div class="container">
   <div class="dropdown">
     <button class="dropbtn">
       <div class="bar1"></div>
       <div class="bar2"></div>
       <div class="bar3"></div>
     </button>
       <div id="myDropdown" class="dropdown-content">
         <a href="#home">Home</a>
         <a href="#contact">Contact</a>
         <a href="#work-experience">Work Experience</a>
         <a href="#website-code">Website Code</a>
       </div>
    </div>
    </div>

I added it and for some reason it says the function is undefined. Do you think that replit could be the problem here? — BouckleyBoy, Jan 24 '23 at 00:37
BouckleyBoy If the function fails, then the function can be removed and also the loop, creating an even shorter program, as seen in the edited answer — Table, Jan 25 '23 at 19:01

Website Dropdown Menu Function Not Working in JavaScript

1 Answers1