我不明白如何使用document.getElementById（'id'）。onclick

Question

我正在學習javascript，現在正在構建一個簡單的菜單，該菜單將在單擊導航按鈕時顯示。

當我在鏈接到我的html的單獨的js文件中時，我不明白如何使用document.getElementById（'id'）。onclick。 環顧四周，我想我理解我的問題是，您無法將onclick稱為藍色，因為DOM元素尚未定義..或僅那些行。 我只是不明白該如何進行。

如果我在按鈕html標簽中添加onclick =“ function（）”，則可以使用，但是當我在單獨的js文件中添加時，則不能使用。 我正在使用此處找到的W3school教程。

這是我的代碼

<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() 

這是一個codepen

謝謝你的幫助！

Answer 1

只是代替

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

替換為

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

因為onclick接受函數，並且您已經定義了此函數

Answer 2

1.在頁面HTML所在的文件夾中創建myjavascript.js文件。

2.復制myjavascript.js中的javascript代碼“僅代碼不標記<script></script> ”

4.將此內容粘貼到html頁面的末尾

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

這是在html文件中引用代碼javascript的方式。

Answer 3

使用jquery比使用純JavaScript會容易得多。 在這里，您如何調用showDropDown函數是錯誤的

change function showDropDown為showDropDown

更好的是，您可以在按鈕單擊事件中進行關閉，例如

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

Answer 4

將其保存在單獨的js文件中應該可以正常工作，您只需要使用script標簽導入js文件即可。 您可能應該在HTML末尾執行此操作，以確保在加載DOM之后運行js。

更新您缺少函數調用方括號：

document.getElementById（“ nav”）。onclick = function（）{showDropDown（）; };