Problem display div mittels klick durch Javaskript
bearbeitet von Matthias Apsel> Hi Mark,
>
> Danke für die super Antwort!
>
> Kannst du mir kurz mal sagen was die [0] genau bedeuten soll, außerdem wie genau funktioniert der addEventListener und auch dein Tipp mit "console.log(document.getElementsByClassName('dropdown-content').style.display);" verstehe ich nicht wirklich... Deine anderen Tipps werde ich versuchen später einzuarbeiten das ist mir alles schlüssig, bin aber grad noch in der Uni. 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. Danke im Vorraus!
>
> Liebe grüße Josh
Hab jetzt nochmal einiges umgeschrieben, ich ersetzte das hover einfach durch mouseover und mouseout... Außerdem hab ich die Classen durch id's ersetzt (der Einfachheit halber, ich versteh die [0] nämlich einfach nicht). Aber irgendwie funktioniert der addEventListener einfach nicht, die Funktionen lassen sich aber über onclick im HTML file aufrufen?!?!?
hier der Code:
~~~html
<div id="dropdown">
<Button id="dropbtn">
<i class="fa fa-camera"></i> Bilder <i class="fa fa-camera"></i>
</Button>
<div id="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
~~~
~~~js
document.getElementById('dropdown').addEventListener('click', showmen);
document.getElementById('dropdown').addEventListener('mouseover', showmen1)
document.getElementById('dropdown').addEventListener('mouseout', showmen2)
function showmen() {
if (document.getElementById('dropdown-content').style.display == 'none') {
document.getElementById('dropdown-content').style.display = 'block';
}
else {
document.getElementById('dropdown-content').style.display = 'none';
}
}
function showmen1() {
document.getElementById('dropdown-content').style.display = 'block';
}
function showmen2() {
document.getElementById('dropdown-content').style.display = 'none';
}
~~~