Ich verstehe nicht, wie man document.getElementById ('id') verwendet onclick

Question

Ich lerne gerade Javascript und ich baue gerade ein einfaches Menü, das angezeigt wird, wenn die Navigationsschaltfläche geklickt wird.

Ich verstehe nicht, wie Sie die document.getElementById ('ID'). Onclick verwenden, wenn in einer separaten Js-Datei, die mit meinem HTML verknüpft ist. Ich verstehe, dass mein Problem darin besteht, dass man nicht auf den blauen Knopf klicken kann, weil das DOM-Element noch nicht definiert ist. Ich verstehe einfach nicht, wie es weitergeht.

Wenn ich innerhalb meiner Schaltfläche html Tag onclick = "function()" hinzufügen, funktioniert es, aber es nicht, wenn ich es in meiner separaten js-Datei hinzufügen. Ich benutze das W3school Tutorial gefunden here.

Hier ist mein Code

<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

Vielen Dank für Ihre Hilfe!

Answer 1

nur statt

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

ersetzen Sie es mit

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

weil die Onclick-Funktion akzeptiert und you'r definiert diese Funktion bereits

Answer 2

Wenn es in einer separaten js-Datei funktioniert, müssen Sie nur die js-Datei mit dem Skript-Tag importieren. Sie sollten dies wahrscheinlich am Ende des HTML tun, um sicherzustellen, dass die js ausgeführt wird, nachdem das DOM geladen wurde.

aktualisiert Sie die Klammern um den Funktionsaufruf fehlt.

document.getElementById ("NAV") Onclick = function() {showDropDown(); };

Answer 3

1.Erstellen myjavascript.js Datei in demselben Ordner wo Ihre Seite html ist.

2.copy der Javascript-Code in myjavascript.js

4.paste diese am Ende Ihrer HTML-Seite

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

Diese "nur Code <script></script> nicht Tag" ist die Art und Weise Ihrer zu referenzieren Code Javascript in Ihrer HTML-Datei.

Answer 4

Es wird viel einfacher sein, mit jquery zu arbeiten, als mit einfachem Javascript. Hier wie rufst du showDropDown Funktion ist falsch

change function showDropDown zu showDropDown

Besser Sie den Verschluss auf die Schaltfläche Click-Ereignis machen können wie

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