1

So essentially I want to keep this as simple as possible, meaning no jquery or bootstrap etc... just straight javascript, HTML and CSS. This is what I have so far

Javscript:

var menuOptions= document.getElementsByClassName("nav");

var hamburger= document.getElementById("nav-btn");

  function myFunction() {

hamburger.onclick= menuOptions.style.visibility= 'visible';

}

HTML:

<HTML>
  <button onclick="myFunction()">  
    <span id="nav-btn">
      <image src="Menugreen.png" alt="collapsable menu"/>  
    </span>
  </button>  
<div class="nav">
  <ul>
    <li id="Programs"> <a href="Programs.html"> Programs </a> </li>
    <li> <a href="Tshirts.html"> T-Shirts </a> </li>
    <li id="About"> <a href="About.html"> About </a> </li>
  </ul>
</div>
</HTML>

CSS:

.nav {
  visibility: hidden;
}

Besides just giving me a solution I would highly appreciate it if you could explain why my current method does not work and why yours does. Thanks in advance!

Improve this question
2
  • and what do you need the hamburger for? Commented Mar 4, 2017 at 5:08
  • before I established a variable hamburger but have recently realized I don't need to... but I can't seem to get rid of this error in my HTML "Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick". Do you know why? Commented Mar 4, 2017 at 5:21

2 Answers 2

Reset to default
1

Two problems:

  1. getElementsByClassName() returns a list, not a single element (though the list may contain just a single element), and that list doesn't have a .style property. You can use menuOptions[0] to access the first (and in this case only) element in the list.

  2. You don't want to say hamburger.onclick= inside your function, because that would be assigning a new onclick handler but your function is already being called from the onclick attribute of your button. (Also, if you were trying to assign a new click handler you'd want hamburger.onclick = function() { /* something */ }.)

So the minimum change to your existing code to get it to work would be to change this line:

hamburger.onclick= menuOptions.style.visibility= 'visible';

...to this:

menuOptions[0].style.visibility = 'visible';

In context:

var menuOptions= document.getElementsByClassName("nav");
var hamburger= document.getElementById("nav-btn");

function myFunction() {
  menuOptions[0].style.visibility = 'visible';
}
.nav {
  visibility: hidden;
}
<HTML>
  <button onclick="myFunction()">  
    <span id="nav-btn">
      <image src="Menugreen.png" alt="collapsable menu"/>  
    </span>
  </button>  
<div class="nav">
  <ul>
    <li id="Programs"> <a href="Programs.html"> Programs </a> </li>
    <li> <a href="Tshirts.html"> T-Shirts </a> </li>
    <li id="About"> <a href="About.html"> About </a> </li>
  </ul>
</div>
</HTML>

If you want repeated clicks on the button to toggle the menu display on and off then you can test the current visibility:

  menuOptions[0].style.visibility =
    menuOptions[0].style.visibility === 'visible' ? '' : 'visible';

Expand the following to see that working:

var menuOptions= document.getElementsByClassName("nav");
var hamburger= document.getElementById("nav-btn");

function myFunction() {
  menuOptions[0].style.visibility =
    menuOptions[0].style.visibility === 'visible' ? '' : 'visible';
}
.nav {
  visibility: hidden;
}
<HTML>
  <button onclick="myFunction()">  
    <span id="nav-btn">
      <image src="Menugreen.png" alt="collapsable menu"/>  
    </span>
  </button>  
<div class="nav">
  <ul>
    <li id="Programs"> <a href="Programs.html"> Programs </a> </li>
    <li> <a href="Tshirts.html"> T-Shirts </a> </li>
    <li id="About"> <a href="About.html"> About </a> </li>
  </ul>
</div>
</HTML>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Ok thank you so much for the speedy response!!! I understnad reasoning #2 but not quite #1 (Still unsure what [0] does). Nevertheless, when I changed the javascript code I got this error "Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick" This is referring to the HTML, do you know why?
How do you include the Javascript in your page? The square brackets lets you access an element of a list or array. The 0 is because the element indices start at zero, so [0] is the first element, [1] is the second (if there is a second), etc. You don't have to do that with your other variable because getElementById() returns exactly one element, not a list.
What do you mean how do I include Javascript? I use <head><script src="example.js"></script></head> I apologize in advance if this is frustrating, I have only been coding for two months now.
I mean that your question did not mention or show whether the script was inline, or from an external script, or where the <script> element was in relation to other elements. Anyway, if it is in the <head> as per your comment, and the file actually exists and is loaded (does it show as loaded in the browser's dev tools' network tab?) and the code is as shown then I can't explain why it doesn't work. (You can see that my code does work in the little snippets...)
0

There are a few reasons why your current setup does not function:

  • Document#getElementsByClassName returns a collection, and you are treating the result like a DOM element. You need to access an index like [0] to get an actual element.

  • Your toggle button only works one way, because visibility is set to visible but never set back to none when clicked again.

  • In myFunction, hamburger.onclick should not be assigned to the expression you chose. I am not sure why you tried to assign another click handler, but in order to make that work you would have needed to set it to a function () { ... }.

Now for my advice:

  • Use CSS classes to control whether the menu is hidden or not, rather than messing around with the style property in your JS. You can use the classList property of DOM elements to .add(), .remove(), and .toggle() a specific class when myFunction is run. I have chosen to use toggle because I think that most suits your use case.

  • Use element.addEventListener instead of HTML attributes like onclick.

Snippet:

var menuOptions = document.getElementsByClassName("nav")[0]

var hamburger = document.getElementById("nav-btn")

hamburger.parentNode.addEventListener('click', function myFunction() {
  menuOptions.classList.toggle('hidden')
})
.nav.hidden {
  visibility: hidden;
}
<button>  
    <span id="nav-btn">
      <img src="Menugreen.png" alt="collapsable menu"/>  
    </span>
  </button>
<div class="nav hidden">
  <ul>
    <li id="Programs"> <a href="Programs.html"> Programs </a> </li>
    <li> <a href="Tshirts.html"> T-Shirts </a> </li>
    <li id="About"> <a href="About.html"> About </a> </li>
  </ul>
</div>

Improve this answer

7 Comments

Thank you for the response! I'm still having trouble because unfortunately I am getting this error "Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick" Do you have any idea why this might be? (it is referring to the HTML)
Try using addEventListener as I have shown in the updated snippet above. Hope that helps! Let me know if it doesn't; post your full code and I can take a look to diagnose the error.
I really appreciate trying to help me out, but I seem to be getting the same error. I would be willing to send you all my code (lot more than what was given)... is there anyway I can give it to you privately?
Actually, just create a JSFiddle or Codepen and send the link to me that way. That would probably be easiest.
The demo is working for me; I removed a stray slash that was closing one of your div elements prematurely. I think the error was caused by not removing the onclick attribute (you don't need it after you add the event listener a different way).
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.