Removing Class Using Javascript

Question

I'm trying to teach myself a little javascript for project I am working on and just wanted to see if I could get some help. I use 3 different drop down menus and I use the below function to hide one menu when another is clicked. It worked

function DropDownMenuNavigation() {
    document.getElementById("DropDownMenuNav").classList.toggle("show");
    document.getElementById('DropDownMenuChart').classList.remove('show');
}

The above code worked well when I had 2 different drop down menus. But now that I have 3 it doesn't seem to see the 3 line I've added below.

function DropDownMenuNavigation() {
    document.getElementById("DropDownMenuNav").classList.toggle("show");
    document.getElementById('DropDownMenuChart').classList.remove('show');
    document.getElementById('DropDownMenuCat').classList.remove('show');
}

If I switch the bottom line with the middle line it will regonize that line, I'm guessing there is something wrong with the format I'm writing it in? Something tells me I'm not including a separator or something. Anyways, I know its something small, maybe someone could point it out to me.

EDIT:

JAVASCRIPT

<script>
function DropDownMenuNavigation() {
document.getElementById("b2DropDownMenuNav").classList.toggle("show");
document.getElementById("b2DropDownMenuCat").classList.toggle("remove");
document.getElementById("b2DropDownMenuCha").classList.toggle("remove");
}
function DropDownMenuCategory() {
document.getElementById("b2DropDownMenuCat").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");  
}
function DropDownMenuCharts() {
document.getElementById("b2DropDownMenuCha").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");  
}
</script>

HTML

<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuNavigation()" class="dropbtn">&#9776; MENU</button>
</div>

<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button>
</div>

<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCharts()" class="dropbtn">CATEGORIES</button>
</div>

<div class="dropdown">
<div id="b2DropDownMenuCategory" class="dropdown-content">
1
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCharts" class="dropdown-content">
2
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuNavigation" class="dropdown-content">
3
</div>
</div>

CSS

/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
float: left;
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown  */
.dropdown-content a {
color: #000000;
text-decoration: none;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

Please add the relevant HTML and CSS so that we can replicate your issue — Scott Marcus, Oct 08 '17 at 20:08
Have you checked the browser console for errors? If not then I recommend you check. Also please include the relevant `html` to your question please. Thank you. — NewToJS, Oct 08 '17 at 20:10
Theres probably no `DropDownMenuChart` so it will crash, making it just work in a certain order ( just the stuff before crashing works) — Jonas Wilms, Oct 08 '17 at 20:24
@Born2DoubleUp Did you check the browser console for errors after adding the third item? — NewToJS, Oct 08 '17 at 20:26
console says: TypeError: document.getElementById(...) is null DropDownMenuNavigation onclick — Born2DoubleUp, Oct 08 '17 at 20:54
I should also add that the Navigation is present on every page. but the Category and Charts are located on their own page separately (with nav). — Born2DoubleUp, Oct 08 '17 at 20:55

Scott Marcus · Answer 1 · 2017-10-08T21:05:23.567

The code you posted has mismatches between the actual ids of the content and the document.getElementById() lines, but assuming that you correct that, your code does in fact work, but each bit of content just winds up going under the other, so you never see the correct content.

function DropDownMenuNavigation() {
    document.getElementById("b2DropDownMenuNav").classList.toggle("show");
    document.getElementById("b2DropDownMenuCat").classList.toggle("remove");
    document.getElementById("b2DropDownMenuCha").classList.toggle("remove");
    }
    function DropDownMenuCategory() {
    document.getElementById("b2DropDownMenuCat").classList.toggle("show");
    document.getElementById("b2DropDownMenuNav").classList.toggle("remove");  
    }
    function DropDownMenuCharts() {
    document.getElementById("b2DropDownMenuCha").classList.toggle("show");
    document.getElementById("b2DropDownMenuNav").classList.toggle("remove");  
    }

/* Dropdown Button */
    .dropbtn {
    background-color: #0066a2;
    color: white;
    padding: 1px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    }
    .dropbtn a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    }
 
    /* The container <div> - needed to position the dropdown content */
    .dropdown {
 float: left;
    position: relative;
    display: inline-block;
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #0066a2;
    min-width: 260px;
    max-width: 960px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    /* Links inside the dropdown  */
    .dropdown-content a {
    color: #000000;
    text-decoration: none;
    }

    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {display:block;}

<div class="dropbtn" style="float: left;">
    <button onclick="DropDownMenuNavigation()" class="dropbtn">&#9776; MENU</button>
    </div>

    <div class="dropbtn" style="float: left;">
    <button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button>
    </div>

    <div class="dropbtn" style="float: left;">
    <button onclick="DropDownMenuCharts()" class="dropbtn">CATEGORIES</button>
    </div>

    <div class="dropdown">
    <div id="b2DropDownMenuCat" class="dropdown-content">
    1
    </div>
    </div>
    <div class="dropdown">
    <div id="b2DropDownMenuCha" class="dropdown-content">
    2
    </div>
    </div>
    <div class="dropdown">
    <div id="b2DropDownMenuNav" class="dropdown-content">
    3
    </div>
    </div>

But, since you are new to this, it's best not to start off with bad habits, so don't use inline HTML event attributes (i.e. onclick, etc.), there are many reasons why and you can review them here.

Next, you have a lot of unneeded HTML and the structure of the HTML should be altered to represent the hierarchy of the content.

Also, you don't need separate functions for each menu click as trying to keep track of what should be hidden and what should be shown in an ever-increasing list of menu items is not a scaleable result.

When these changes are made, the HTML is much cleaner and less involved and the JavaScript is also much simpler:

// First, get references to the HTML elements your code will need. 
// You could get individual references, like this:
/*
var b2DropDownMenuNav = document.getElementById("b2DropDownMenuNav");
var b2DropDownMenuCat = document.getElementById("b2DropDownMenuCat");
var b2DropDownMenuCha = document.getElementById("b2DropDownMenuCha");
*/

// But in your case, a single reference to the collection of menus will do.
// We'll also want that collection to be converted to a JavaScript array.
var menus = Array.prototype.slice.call(document.querySelectorAll(".dropbtn"));

// Now, we can just loop over the array and give the buttons a common function
// to perform when they are clicked (no need for multiple functions.
menus.forEach(function(menu){
  menu.addEventListener("click", function(){
  
    // Hide any currently showing menu content
    Array.prototype.slice.call(document.querySelectorAll(".dropdown-content")).forEach(function(content){
      content.classList.remove("show");
    });
  
    // Show the content of the menu that was clicked:
    menu.querySelector(".dropdown-content").classList.toggle("show");
  });
});

/* Dropdown Button */
.dropbtn {
  background-color: #0066a2;
  color: white;
  padding: 1px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  float:left; /* no need to write this inline with the HTML, just put it here */
}

.dropbtn a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

/* The container <div> - needed to position the dropdown content */
/* I can't see any need for this class at all: 
.dropdown {
  float: left;
  position: relative;
  display: inline-block;
}
*/

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  background-color: #0066a2;
  min-width: 260px;
  max-width: 960px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  position: absolute;
  /* z-index: 1;  <-- NOT NEEDED */
}

/* Links inside the dropdown  */
.dropdown-content a {
  color: #000000;
  text-decoration: none;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show { display:block; }

<!-- There is no need to nest button elements inside of div elements.
     Just get rid of the buttons completely and make the divs the clickable
     elements. -->

<div class="dropbtn" id="b2DropDownMenuNav">&#9776; MENU
  <div class="dropdown dropdown-content">1</div>
</div>

<div class="dropbtn" id="b2DropDownMenuCat">CATEGORIES
  <div class="dropdown dropdown-content">2</div>
</div>

<div class="dropbtn" id="b2DropDownMenuCha">CATEGORIES
  <div class="dropdown dropdown-content">3</div>
</div>

Removing Class Using Javascript

1 Answers1