0

I'm trying to display and hide a div class using JavaScript, so that when someone hits a button a hidden section displays/hides dependent on the state/style. I've managed to display the hidden section, but I can't then hide it again. Here is the code I am using is a file called locationMenu.js.

const locationLink = document.getElementsByClassName('locationLink')[0];

locationLink.addEventListener('click', () => {
if (display = "none") {document.getElementsByClassName('locationMenuDropdown')
[0].style.display = 'block';}
else {document.getElementsByClassName('locationMenuDropdown')[0].style.display 
= 'none';}
});

and here is the (simplified) HTML

<div class="header">
  <div class="locationMenuDropdown">
    <h3>Choose a Location</h3>
    <div class="locationButtons">
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Kettering</div>
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Northampton</div>
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Wellingborough</div>
    </div>
  </div>

  <div id="locationMenu"><h4 class="locationLink"><i class="fas fa-map-marker-alt"></i> Locations</h4>
  </div>


<script type="text/javascript" src="locationMenu.js"></script>
TomN
  • 23
  • 5
  • 3
    The `getElementsByClassName()` function returns a **list** of elements. You have to iterate through the list and operate on each element individually. – Pointy Feb 14 '18 at 14:01
  • Well, he is targeting only the first element in this list by indexing `0` with `getElementsByClassName('locationMenuDropdown')[0]`, so there is no error here, but you are mainly right ... using `getElementById()` would be the better choice to prevent errors – Michel Engelen Feb 14 '18 at 14:06
  • Where is button tom in your html – Dipak Feb 14 '18 at 14:09
  • @Dipakchavda — They are using an `

    ` instead of a `

     – Quentin Feb 14 '18 at 14:10

3 Answers3

1

the problem is in the if condition, you are setting display to "none". The problems here are 2:

1- The display variable doesn't exist so the JS interpreter instace a new variable with that name;

2- The condition that u were trying to verificate is always true cause the = is the assignment symbol and not the equality ( == )

i think the best options to get the job done is 

const locationLink = document.getElementsByClassName('locationLink')[0];

var divToFade = document.getElementsByClassName('locationMenuDropdown')[0];

locationLink.addEventListener('click', () => {
if (divToFade.style.display == "none") 
{
divToFade.style.display = 'block';
}
else 
{
divToFade.style.display = 'none';
}
});

See JsFiddle: https://jsfiddle.net/ja3xjw6c/6/

Mario Murrent
  • 712
  • 5
  • 24
Davide Gozzi
  • 121
  • 5
  • Thank you Davide! That worked. Interestingly, I now have to double-click the button in the first instance to display the hidden
    , but after that, one-click is OK. But the way that is written makes perfect sense :)
     – TomN Feb 14 '18 at 14:29
  • See the updated fiddle: https://jsfiddle.net/ja3xjw6c/12/ Then you dont need to double click :) – Mario Murrent Feb 14 '18 at 15:20
0
if (display = "none")

There are two problems here.

  1. You haven't defined display. Elsewhere you use document.getElementsByClassName('locationMenuDropdown') [0].style.display
  2. = is an assignment, not a comparison. It will always be true. See The 3 different equals
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
-1

Why aren't you using jQuery? then you could simply do this:

$('.locationLink').click(function(){
    $('locationMenuDropdown').toggle();
});
MESP
  • 486
  • 2
  • 17
  • 1
    [Unless a tag for a framework or library is also included, a pure JavaScript answer is expected for questions with the javascript tag.](https://stackoverflow.com/tags/javascript/info) – Quentin Feb 14 '18 at 14:04
  • Thanks Menno, just getting my head around JavaScript... JQuery is on my 'to try and understand soon list :D – TomN Feb 14 '18 at 14:35