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

我正在学习JavaScript，现在我正在构建一个简单的菜单，它将显示何时导航按钮被点击。我不明白如何使用document.getElementById（'id'）。onclick

我不明白如何使用document.getElementById（'id'）。onclick在分离的js文件中链接到我的html。仔细阅读我认为我明白，我的问题是，您不能调用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

感谢您的帮助！

来源

2017-07-08 oehaut

这JavaScript代码贴不即使有效的语法 - 阅读错误日志/控制台帮助修复微不足道的错误，这也可能导致.. – user2864740

只是代替

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

因为的onclick接受功能，找你已经在同这个函数

来源

2017-07-08 00:31:39

哇，新手错误，确实做到了！如果我可能会问，为什么不= showDropDown（），因为我指向一个函数？ – oehaut

@oehaut'showDropDown（）'将执行由'showDropDown'命名的函数。因此，'..onclick = showDropDown（）'确实是'..onclick = {调用函数的结果}'。除非函数*返回一个函数*作为回调函数，否则这不是很有用。 '..onclick = showDropDown（）'的*实际*观察结果就像是“showDropDown在加载时被调用一次，从未在单击按钮时”。 – user2864740

@oehaut http://eloquentjavascript.net/了解JavaScript中的函数的一个很好的资源。它还包含许多实用的实践示例。 – user2864740

-1

让它在一个单独的js文件中应该可以工作，只需要使用脚本标记导入js文件即可。您应该在HTML的末尾执行此操作，以确保在加载DOM后运行js。

更新你周围是否缺少函数调用的括号：。

的document.getElementById（ “NAV”）的onclick =函数（）{showDropDown（）; };

来源

2017-07-08 00:31:06

我的头文件中有。 js文件正在工作，因为我可以打电话给我的功能很好，当我做<按钮onclick =“showDropDown（）” 我试着将它添加到html的末尾，但它不工作。 – oehaut

当您将其设置为onclick属性时，您会错过函数调用的括号。见下文。 document.getElementById（“nav”）。onclick = function（）{showDropDown（）; }; –

1.创建myjavascript.js文件，

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

更换您的网页html所在的文件夹。

2.复印在myjavascript.js的JavaScript代码在你的HTML页面的结束“唯一的代码没有吊牌<script></script>”

4.paste这

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

这是引用的方式你在您的html文件中编码javascript。

来源

2017-07-08 00:43:28 JG73

使用jquery比使用纯javascript要容易得多。这里你是如何调用showDropDown功能失常

change function showDropDown到 showDropDown

更好的你可以在按钮点击事件的闭合状

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

来源

2017-07-08 00:55:13

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

回答

相关问题