I'm getting a
Uncaught Reference Error : DropDown not defined
when I try to activate my dropdown. It is contained within a nav list but the error started even before that when it was contained within its own div in the header.
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>
CodePudding user response:
when you click on drop-down button then DropDown Function works but you not define function---- soln:
<li><a onclick={DropDown} class="dropbtn">MORE</a>
<div id="myDropdown" class="dropdown-content">
CodePudding user response:
You should move your <script/>
tag to bottom of html code and move your header tag into body tag
<!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>