nicht angemeldet
Kannst du mir kurz mal sagen was die [0] genau bedeuten soll,
Es gilt zu verstehen, was ein Array ist. Du kannst dir das zu Beginn, vorstellen wie ein Schrank mit Schubladen. Später wirst du erkennen, dass dieser Vergleich hinkt, aber zu Beginn geht das mMn recht gut.
Mit variablenName[0] selektierst du die erste Schublade und liest deren Inhalt. Mit variablenName[1] selektierst du die zweite Schublade und liest deren Inhalt usw.
Es wäre möglich, dass sich in deinem HTML-Dokument mehrere Elemente mit dem class-Attribut dropdown-content befinden. document.getElementsByClassName('dropdown-content') liefert dir einen Schrank und packt in jede Schublade ein 'dropdown-content'-Element.
Auf deiner Seite befindet sich nur ein Element mit dem class-Attribut 'dropdown-content' deshalb hat dein Schrank nur eine Schublade.
document.getElementsByClassName('dropdown-content') ist der Schrank. document.getElementsByClassName('dropdown-content')[0] ist die erste Schublade des Schrankes in der sich dein Element befindet.
Und das ist ja genau das, was du möchtest. Du möchtest nicht den Schrank display = "block" zuweisen, sondern dem Inhalt deiner Schublade, sprich: dem 'dropdown-content'-Element.
Nur am Rande: Gunnar hat vollkommen recht, dass es sich beim Rückgabewert von getElementsByClassName um eine Collection handelt. Also genau genommen nicht um ein Array. Darauf einzugehen würde mMn zu Beginn zu weit führen. Aber behalt dir das im Hinterkopf.
außerdem wie genau funktioniert der addEventListener
Darauf mag/kann ich nicht zufriedenstellend Antworten. Probiers aus und frag nach, wenn Probleme auftreten. https://wiki.selfhtml.org/wiki/AddEventListener
Beispiele dafür gibt es zu hauf.
el.addEventListener("click", deineFunktion );
und auch dein Tipp mit "console.log(document.getElementsByClassName('dropdown-content').style.display);" verstehe ich nicht wirklich...
a) Füge den Code console.log('HELLO WORLD'); in dein Javascript ein. b) Öffne deine Seite c) Öffne die Browser Konsole (Konsole: CTRL+SHIFT+C) d) Du solltest nun "HELLO WORLD" in deiner Konsole überprüfen können.
Das ist ein Weg, von vielen Möglichen, um zu überprüfen, ob dein Code so funktioniert, wie du dir das vorgestellt hast.
Als nächstes kannst du auf deiner Seite folgendes probieren: console.log(document.getElementsByClassName('dropdown-content')); console.log(document.getElementsByClassName('dropdown-content')[0]);
Deine anderen Tipps werde ich versuchen später einzuarbeiten das ist mir alles schlüssig, bin aber grad noch in der Uni.
Ja, eins nach dem anderen. Es hat sicherlich Priorität, dass du das mit dem Menue hinbekommst.
Leider ist jetzt ein weiteres Problem aufgetaucht. Mit hover in css wird der 'dropdown-content' noch geöffnet, aber nur so lange nicht geklickt wird. Sobald ich einmal klicke funktioniert die Öffnung per hover nicht mehr nurnoch per click.
Ja. Das hätte ich vorhersehen können/müssen. Du versteckst das Element mit document.getElementsByClassName('dropdown-content')[0].style.display = 'none'; Da erzeugst du einen inline Style der von deinem css nicht mehr überschrieben wird.
Als Lösung könntest du anstatt style.display = 'none'; document.getElementsByClassName('dropdown-content')[0].removeAttribute('style') probieren. Das entfernt sämtliche von javascript gesetzten Styles. Dein Menue ist per default display: none, also sollte das reichen. Du musst das mit Javascript nicht extra nochmal setzen.
Oder nur um dein Verständnis für die Materie zu schärfen könntest du auch in deinem css, im :hover-Selector ein display: block !important; probieren, dann würde dein css den von Javascript gesetzten inline-Style überschreiben. Von dieser Vorgehensweise ist aber sonst generell abzusehen.
lg
Gunnar Bittersmann