What could be causing the error message to appear when I click on my dropdown button?

Question

What could be causing the error message to appear when I click on my dropdown button?

I am encountering an issue with my dropdown menu activation. The error message I receive is:

Uncaught Reference Error : DropDown not defined

This problem started when the dropdown was in its own div within the header, and now persists even after moving it into a nav list.

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;    
    for  (i =  0; i < dropdowns.length; i++) {      
      var  openDropdown = dropdowns[i];      
      if  (openDropdown.classList.contains('show'))  {       
        openDropdown.classList.remove('show');     
      }    
    } 
  }
}

body {
  margin: 0px;
}

#logo {
  width: 130px;
  float: left;
  padding-top: 13px;
  padding-bottom: 13px;
}

.container {
  width: 80%;
  margin: 0;
  float: left;
  padding: 0;
}

header {
  background-color: #55d6aa;
  padding: 0;
  margin: 0;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

nav {
  float: right;
  font-size: 14px;
  margin: 0;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  display: inline-block;
  margin: 0;
  padding-top: 23px;
  margin-left: 10px;
  position: relative;
}

nav a {
  color: black;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: darkblue;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  width: 100%;
  background-color: black;
  top: 0;
  width: 0%;
  position: absolute;
  transition: all ease-in-out 250ms;
  border-radius: 10px 10px 10px 10px;
}

nav a:hover::before {
  width: 100%;
}

nav a:focus {
  background-color: #55d6aa;
}

#banner {
  width: 100%;
  height: 114px;
  margin: 0;
  padding: 0;
}

#barline {
  height: 30px;
  width: 100%;
  background-color: #55d6aa;
  margin: 0;
  padding: 0;
  float: right;
}

.dropbtn {
  background-color: #55d6aa;
  margin: 0;
  border: 0;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 60px;
  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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Page title</title>
  <link rel="stylesheet" href="CSS/Style.css">
  <script type="javascript" src="Java/Java.js"></script>
</head>

<header>




  <div class="container">

    <img id="logo" src="IMG/Logo.png" alt="logo"></img>


    <nav>

      <ul>

        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
        <li><a onclick="DropDown" class="dropbtn">MORE</a>
          <div id="myDropdown" class="dropdown-content">
            <a href="">Profile</a>
            <a href="">Settings</a>
            <a href="">Log Out</a>

          </div>
          </a>
        </li>

      </ul>

    </nav>

  </div>

</header>

<body>

  <div>

    <img id="banner" src="IMG/MountainBanner.jpg" alt="Mountains"></img>


  </div>

  <div id="barline">

  </div>





</body>

</html>

javascript dropdown

Answer 1

Answer №1

If you want your webpage to load faster, consider moving your <script/> tag to the bottom of the HTML code. Additionally, make sure to place your header tag within the body tag for proper structure.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Page title</title>
  <link rel="stylesheet" href="CSS/Style.css">
  
</head>
<body>
  <header>
   . . .
  </header>
  <div>
    <img id="banner" src="IMG/MountainBanner.jpg" alt="Mountains"></img>
  </div>

  <script type="javascript" src="Java/Java.js"></script>
</body>
</html>

Answer 2

If you want your webpage to load faster, consider moving your <script/> tag to the bottom of the HTML code. Additionally, make sure to place your header tag within the body tag for proper structure.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Page title</title>
  <link rel="stylesheet" href="CSS/Style.css">
  
</head>
<body>
  <header>
   . . .
  </header>
  <div>
    <img id="banner" src="IMG/MountainBanner.jpg" alt="Mountains"></img>
  </div>

  <script type="javascript" src="Java/Java.js"></script>
</body>
</html>

Answer 3

Answer №2

Oops! There seems to be a syntax issue.

It looks like the onclick="DropDown()" was missing a set of parentheses.

Furthermore, you might want to consider moving the <body> tag after the </head> tag for better structure, although this won't affect your script.

Lastly, remember that JAVA is not JavaScript, so it's recommended to rename the js file and folder accordingly.

Here's a cleaner version with suggested eventListeners:

window.addEventListener("load", function() {
  const dd = document.getElementById("myDropdown");
  document.querySelector(".dropbtn").addEventListener("click", function(e) {
    dd.classList.toggle("show");
  })
})
window.addEventListener("click", function(event) {
  if (!event.target.matches(".dropbtn")) {
    [...document.querySelectorAll(".dropdown-content.show")]
    .forEach(elem => elem.classList.remove("show"));
  }
});

/* CSS styles */
body {
  margin: 0px;
}
/* Add more CSS styles as needed */

<!doctype html>
<html lang="en">

<head>
  <title>Page title</title>
  <link rel="stylesheet" href="CSS/Style.css">
  <script type="javascript" src="Java/Java.js"></script>
</head>

<body>
  /* Your HTML content here */
</body>

</html>

Answer 4

Oops! There seems to be a syntax issue.

It looks like the onclick="DropDown()" was missing a set of parentheses.

Furthermore, you might want to consider moving the <body> tag after the </head> tag for better structure, although this won't affect your script.

Lastly, remember that JAVA is not JavaScript, so it's recommended to rename the js file and folder accordingly.

Here's a cleaner version with suggested eventListeners:

window.addEventListener("load", function() {
  const dd = document.getElementById("myDropdown");
  document.querySelector(".dropbtn").addEventListener("click", function(e) {
    dd.classList.toggle("show");
  })
})
window.addEventListener("click", function(event) {
  if (!event.target.matches(".dropbtn")) {
    [...document.querySelectorAll(".dropdown-content.show")]
    .forEach(elem => elem.classList.remove("show"));
  }
});

/* CSS styles */
body {
  margin: 0px;
}
/* Add more CSS styles as needed */

<!doctype html>
<html lang="en">

<head>
  <title>Page title</title>
  <link rel="stylesheet" href="CSS/Style.css">
  <script type="javascript" src="Java/Java.js"></script>
</head>

<body>
  /* Your HTML content here */
</body>

</html>

Answer 5

Answer №3

When you engage with the drop-down button, the DropDown Function is triggered but if you have not defined the function----here's a solution:

<li><a onclick={DropDown} class="dropbtn">MORE</a>
                <div id="myDropdown" class="dropdown-content">

Answer 6

When you engage with the drop-down button, the DropDown Function is triggered but if you have not defined the function----here's a solution:

<li><a onclick={DropDown} class="dropbtn">MORE</a>
                <div id="myDropdown" class="dropdown-content">

What could be causing the error message to appear when I click on my dropdown button?

Answer №1

Answer №2

Answer №3

Similar questions

What could be the reason for my jQuery script not functioning properly?

My NodeJS MongoDB application is being bombarded by an infinite loop of "Sending request..." messages from the Postman

How to handle and display validation errors in an AJAX post request using express-validator in Node.js/Express

Discovering package utilities with npm commands

Developing tests for an asynchronous function

Nested Angular click events triggering within each other

After a page refresh, the Vuex state ends up being null within the mutation rather than the expected predefined

Examining the order in which tabs are navigated

Update the hidden input's value by the ZIP code entered

Vanish Dropdown upon clicking Using JavaScript

Display the next page once two distinct service requests have been received

Insert a new row in a table using jQuery

What is the most effective way to organize a collection according to the specific order specified in another array?

Creating a variable in JavaScript using Smarty in Prestashop 1.6

What is the best way to apply one JavaScript code to two separate HTML elements?

Modify content or display picture within accordion panel based on its identifier

What are some strategies to optimize debugging and troubleshoot errors in a Node.js http post request?

Tips for styling Ajax.ActionLink elements with CSS

Trigger Popup Automatically When Anchor Exists

Protractor is displaying an error message of "unable to locate element testability" when attempting to access an element