Javascript function not working

Report · Sep 17, 2017

I am using a Javascript function for my navigation menu. Why isnt the function working? Do I need a different function for each menu item?

<!doctype html>

<html>

<head>

<title>100 Black Men of San Antonio - Prototype</title>

</head>

<body>

</div>

<button class="dropbtn" onclick="myFunction()">About Us</button>

</div>

<a href="#" class = "nav_Links">Events/Calendar</a>

</button>

<a href="#">2017 Annual Awards Dinner</a>

<a href="#">2017 Fatherhood Jubilee</a>

<a href="#">Educational Choice Townhall</a>

</div>

<a href="#" class = "nav_Links">Get Involved</a>

</button>

<a href="#">Membership</a>

<a href="#">Mentor</a>

<a href="#">Mentee</a>

</div>

<a href="#" class = "nav_Links">Programs</a>

</div>

<a href="#" class = "nav_Links">Donate</a>

</div>

</button>

<a href="#">100 Black Men</a>

<a href="#">Black Men's Health Project</a>

<a href="#">Member's Only</a>

</div>

</nav>

function myFunction() {

document.getElementById("myDropdown").classList.toggle("show");

}

// Close the dropdown 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;

if (openDropdown.classList.contains('show')) {

openDropdown.classList.remove('show');

}

</script>

</body>

</html>

@charset "UTF-8";

/* CSS Document */

.dropbtn{

background-color: rgba(48,48,48,1.00);

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

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: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

}

.dropdown:hover .dropbtn {

background-color: #3e8e41;

}

.container {

background-color: rgba(48,48,48,1.00);

color: rgba(255,255,255,1.00);

display: block;

margin-left: -10px;

margin-right: -10px;

}

.nav_Links{

color: rgba(255,255,255,1.00);

margin-top: 50px;

text-decoration: none;

font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;

font-style: normal;

}

.nav_programs {

margin-left: 514px;

margin-top: -34px;

max-width: 70px;

}

.nav_donate {

margin-left: 626px;

margin-top: -18px;

max-width: 55px;

}

.dropdown_more {

margin-left: 707px;

margin-top: -35px;

max-width: 55px;

}

.dropdown_about_us {

margin-left: 100px;

background-color: rgba(48,48,48,1.00);

color: white;

font-size: 16px;

border: none;

cursor: pointer;

max-width: 103px;

margin-top: -35px;

}

.dropdown_events {

margin-left: 210px;

margin-top: -50px;

max-width: 125px;

}

.home_nav {

margin-top: 0px;

padding-top: 50px;

padding-left: 1px;

max-width: 67px;

margin-left: 0px;

}

.dropdown_get_involved {

margin-left: 355px;

margin-top: -50px;

max-width: 115px;

}

.dropbtn_au{

background-color: rgba(48,48,48,1.00);

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

.dropdown-content_au {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

Report · Sep 17, 2017

<div class="dropdown-content" id="myDropdown">

ID's can only be used once per document. In you case

document.getElementById("myDropdown").classList.toggle("show");

has a choice of 3 ID's to choose from, sending it into a frenzy

Have a look at this answer using the data- attribute: javascript - Dropdown menu using data- to show the submenu - Stack Overflow

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Sep 18, 2017

If you are prepared to use jquery the script below should work, without having to alter any of your html coding.

<script

src="https://code.jquery.com/jquery-3.2.1.min.js"

integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

$(document).ready(function(){

$('.dropbtn').css('cursor' , 'pointer').click(function(){

$('.dropdown-content').hide();

$(this).next('.dropdown-content').show();

});

$('.dropdown-content').css('cursor' , 'pointer').mouseleave(function(){

$('.dropdown-content').hide();

});

</script>

Report · Sep 18, 2017

osgood_ wrote
If you are prepared to use jquery the script below should work, without having to alter any of your html coding.

The multiple use of the same ID still needs to be resolved.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Sep 18, 2017

BenPleysier wrote
osgood_ wrote
If you are prepared to use jquery the script below should work, without having to alter any of your html coding.
The multiple use of the same ID still needs to be resolved.

Just delete the id, as its redundant.

Report · Sep 18, 2017

In the example, you sent me, what is the "data-related-panel"?

Report · Sep 19, 2017

kingpat27 wrote
In the example, you sent me, what is the "data-related-panel"?

I didn't send you the example, Ben did.

The 'data-related-panel' attribute looks for unique 'section' ids when you click on a link to show that specific section.