document.getElementById（ 'id'）の使い方が分かりませんonclick

Question

私はjavascriptを今学んでいます。ナビゲーションボタンがクリックされたときに表示される簡単なメニューを構築しています。

私のhtmlにリンクされている区切られたjsファイルの中で、document.getElementById（ 'id'）。onclickの使い方を理解できません。周りを読んで私は私の問題は、DOM要素がまだ定義されていないため、青からonclickを呼び出すことはできないことを理解していると思う。私はちょうどその時の進め方を理解していない。

ボタンの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() 

のonclick関数を受け入れ、you'rはすでに同じで

Answer 2

これを別のjsファイルに入れると、スクリプトタグを使用してjsファイルをインポートするだけで済みます。 DOMのロード後にjsが実行されることを保証するために、HTMLの最後にこれを行うべきでしょう。

更新あなたの不足している関数呼び出しの周りにブラケット：。

のdocument.getElementById（ "NAV"）のonclick =関数（）{showDropDown（）; };

Answer 3

1.create myjavascript.jsファイルこの関数を定義しているため

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

と交換あなたのページhtmlがあるフォルダ。 myjavascript.js内のJavaScriptコード2.copy

「コードのみ<script></script>タグを付けていない」あなたのhtmlページの最後に、この

4.pasteを

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

これはあなたを参照するための方法でありますあなたのhtmlファイルにjavascriptを記述してください。

Answer 4

jqueryをプレーンJavaScriptよりもはるかに扱いやすくなります。 は、ここでは、showDropDown関数を呼び出しているどのようにJavaScriptコード掲示がされていないことを

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