我不明白如何使用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（）; };