javascript - 我不明白如何使用 document.getElementById (‘id’ ).onclick

Question

我现在正在学习 javascript，我只是构建一个简单的菜单，该菜单将在单击导航按钮时显示。

我不明白如何在链接到我的 html 的单独 js 文件中使用 document.getElementById('id').onclick 。阅读周围我想我明白我的问题是你不能调用 onclick 蓝色因为 DOM 元素尚未定义..或单独的那些行。我只是不明白如何继续。

如果我在按钮 html 标签中添加 onclick="function()"，它会起作用，但当我在单独的 js 文件中添加它时，它不会起作用。我正在使用W3school教程找到here .

这是我的代码

<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

感谢您的帮助!

Answer 1

只是代替

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

替换为

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

因为 onclick 接受函数并且您已经定义了该函数