I don't understand how to use document.getElementById(‘id’).onclick

Question

I'm learning javascript right now and I am just building a simple menu that will show when the nav button is clicked.

I don't understand how to use the document.getElementById('id').onclick when in a separated js file that is linked to my html. Reading around I think I understand that my problem is that you cannot call onclick out the blue because the DOM element are not yet defined.. or something alone those line. I just don't understand then how to proceed.

If I add within my button html tag onclick="function()" it works, but it don't when I add it within my separate js file. I'm using the W3school tutorial found here .

Here is my code

<nav>
      <button class="nav-button" id="nav">
        <div class="menu-button"></div>
        <div class="menu-button"></div>
        <div class="menu-button"></div>
      </button>
      <div class="dropdown-menu" id="dropdown">
        <a href="#">Hello</a>
        <a href="#">Hello</a>
        <a href="#">Hello</a>
      </div>
    </nav>

.nav-button {
  background: none;
  border: none;
  margin-left: 1em;
  padding-top: 12px;
  cursor: pointer;
}

.menu-button {
  background-color: #fff;
  width: 30px;
  height: 4px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.dropdown-menu {
  margin-top: 7px;
  width: 100px;
  background-color: #fff;
  display: none;
}

.showDropDown {
  display: block;
}


function showDropDown() {
  document.getElementById('dropdown').classList.toggle("showDropDown");
}

document.getElementById("nav").onclick = function showDropDown() 

Here is a codepen

Thanks for your help!

Answer 1

just instead of

document.getElementById("nav").onclick = function showDropDown()

replace it with

document.getElementById("nav").onclick = showDropDown

because the onclick accepts function and you'r already defined this function

Answer 2

1.create myjavascript.js file in same folder where your page html is.

2.copy the javascript code in myjavascript.js "only code not tag <script></script> "

4.paste this at the end of your html page

<SCRIPT language="javascript" src="myjavascript.js" type="text/javascript"></SCRIPT>

This is the way to reference your code javascript in your html file.

Answer 3

It will be much easier to work with jquery than plain javascript. Here how you are calling showDropDown function is wrong

change function showDropDown to showDropDown

Better you can make the closure at the button click event like

let btn = document.getElementById("nav"); 
let toggleIt = document.getElementById('dropdown'); 
btn.onclick = function(){  
toggleIt.classList.toggle("showDropDown"); 
};

Answer 4

Having it in a separate js file should work you just need to import the js file using the script tag. You should probably do this at the end of the HTML to guarantee that the js is ran after the DOM is loaded.

Update Your missing the brackets around the function call:

document.getElementById("nav").onclick = function() { showDropDown(); };