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

回答

相關問題