Javascript 我不知道'；我不理解如何使用document.getElementById（‘；id’；）。单击

我现在正在学习javascript，我正在构建一个简单的菜单，当点击导航按钮时，它会显示出来

我不明白如何在链接到我的html的单独js文件中使用document.getElementById（'id'）.onclick。环顾四周，我想我明白了我的问题是你不能调用onclick out the blue，因为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() 

.导航按钮{
背景：无；
边界：无；
左边距：1米；
填充顶部：12px；
光标：指针；
}
.菜单按钮{
背景色：#fff；
宽度：30px；
高度：4px；
边缘底部：5px；
边界半径：5px；
}
.下拉菜单{
边缘顶部：7px；
宽度：100px；
背景色：#fff；
显示：无；
}
.摊牌{
显示：块；
}
函数显示下拉列表（）{
document.getElementById（'dropdown'）.classList.toggle（'showDropDown'）；
}
document.getElementById（“nav”）.onclick=函数showDropDown（）

---

谢谢你的帮助

把它放在一个单独的js文件中应该行得通，您只需要使用script标记导入js文件。您可能应该在HTML的末尾这样做，以确保在加载DOM之后运行js

更新函数调用周围缺少的括号：

---

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

把它放在一个单独的js文件中应该行得通，您只需要使用script标记导入js文件。您可能应该在HTML的末尾这样做，以确保在加载DOM之后运行js

更新函数调用周围缺少的括号：

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

只是代替了

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

换成

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

因为onclick接受函数，并且您已经定义了这个函数，而不是

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

换成

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

---

因为onclick接受函数，并且您已经定义了该函数。请在页面html所在的同一文件夹中创建myjavascript.js文件

2.复制myjavascript.js中的javascript代码“仅代码不标记

”

4.将其粘贴到html页面的末尾

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

---

这是在html文件中引用代码javascript的方法。

1.在html页面所在的同一文件夹中创建myjavascript.js文件

2.复制myjavascript.js中的javascript代码“仅代码不标记

”

4.将其粘贴到html页面的末尾

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

---

这是在html文件中引用代码javascript的方法。

使用jquery比使用普通javascript容易得多。 这里您调用showDropDown函数的方式是错误的

将功能显示下拉列表更改为
显示下拉列表

更好的方法是在按钮单击事件时关闭，如

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

使用jquery比使用普通javascript容易得多。
这里您调用showDropDown函数的方式是错误的

将功能显示下拉列表更改为
显示下拉列表

更好的方法是在按钮单击事件时关闭，如

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

我的头上有这个。js文件可以正常工作，因为当您将函数调用设置为onclick属性时，如果我不知道函数调用周围的括号，那么我可以很好地调用我的函数。见下文。document.getElementById（“nav”）.onclick=function（）{showDropDown（）；}；我的头上有这个。js文件可以正常工作，因为当您将函数调用设置为onclick属性时，如果我不知道函数调用周围的括号，那么我可以很好地调用我的函数。见下文。document.getElementById（“nav”）.onclick=function（）{showDropDown（）；}；哇，新手犯了个错误，确实是这样！如果我可以问，为什么不=showDropDown（），因为我指向一个函数？@oehout
showDropDown（）
将执行名为
showDropDown
的函数。因此，
.onclick=showDropDown（）
实际上是
.onclick={调用函数的结果}
。除非函数返回一个用作回调的函数，否则这不是很有用。因此，对
.onclick=showDropDown（）
的实际观察结果类似于“加载时只调用一次showDropDown，而单击按钮时从不调用它”。@oE有一个很好的资源来学习JavaScript中的函数。它还包含了一些实际操作的例子。非常感谢您的解释！哇，新手犯了个错误，确实是这样！如果我可以问，为什么不=showDropDown（），因为我指向一个函数？@oehout
showDropDown（）
将执行名为
showDropDown
的函数。因此，
.onclick=showDropDown（）
实际上是
.onclick={调用函数的结果}
。除非函数返回一个用作回调的函数，否则这不是很有用。因此，对
.onclick=showDropDown（）
的实际观察结果类似于“加载时只调用一次showDropDown，而单击按钮时从不调用它”。@oE有一个很好的资源来学习JavaScript中的函数。它还包含了一些实际操作的例子。非常感谢您的解释！发布的JavaScript代码甚至不是有效的语法-阅读错误日志/控制台以帮助修复可能导致的轻微错误..发布的JavaScript代码甚至不是有效的语法-阅读错误日志/控制台以帮助修复可能导致的轻微错误