Question

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

我不明白如何在链接到我的html的单独的js文件中使用document.getElementById（'id'）。onclick。阅读我认为我明白我的问题是你不能打电话给蓝色，因为DOM元素还没有被定义..或者那些单独的那些行。我只是不明白如何继续。

如果我在我的按钮html标签中添加onclick =“function（）”它可以工作，但是当我在单独的js文件中添加它时它不会。我正在使用here找到的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()

Here is a 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代码＆＃34;只有代码不标记<script></script>＆＃34;

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文件中应该只需要使用脚本标记导入js文件。您可能应该在HTML的末尾执行此操作，以确保在加载DOM之后运行js。

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

document.getElementById（＆＃34; nav＆＃34;）。onclick = function（）{showDropDown（）; };

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

4 个答案: