Div ???

Hallo Leute. Ich habe 10 unsichtbare div's übereinanderliegen. Jedes soll nach dem Aufruf aus einer selectbox, angesprochen und sichtbar gemacht werde. Funktioniert bei jedem div auch einwandfrei. Nun das Problem : Bei jedem erneuten sichtbar machen / Aufruf eines neuen div's, soll das zuvor sichtbar gemachte, wieder unsichtbar werden. Habe nach 6 Stunden, knobeln, aufgeben müssen.

Der hier verwendete Code

<html> <head> <style> *{ magin:0; padding:0; } select{ height:30px; font-size:20px; } main{ margin:0 auto; display:flex; flex-wrap:wrap; max-width:600px; } .box{ height:196px; display:none; width:196px; border:2px solid black; font-size:35px; text-align:center; line-height:100px; } .sichtbar{ display:block; } </style> </head> <body> <label> <select> <option value="1">Box 1</option> <option value="2">Box 2</option> <option value="3">Box 3</option> <option value="4">Box 4</option> <option value="5">Box 5</option> <option value="6">Box 6</option> <option value="7">Box 7</option> <option value="8">Box 8</option> <option value="9">Box 9</option> <option value="allon">Alle Boxen einblenden</option> <option value="off">Alle Boxen ausblenden</option> </select> </label> <main> <div class="box" id="box1">Box1</div> <div class="box" id="box2">Box2</div> <div class="box" id="box3">Box3</div> <div class="box" id="box4">Box4</div> <div class="box" id="box5">Box5</div> <div class="box" id="box6">Box6</div> <div class="box" id="box7">Box7</div> <div class="box" id="box8">Box8</div> <div class="box" id="box9">Box9</div> </main> </body> <script> document.getElementsByTagName('select')[0].addEventListener('change',function(){ var val=this.value; var box=document.querySelectorAll('.box'); box.forEach(function(el){ if(val=='allon'){ el.classList.add('sichtbar'); } if(val=='off'){ el.classList.remove('sichtbar'); } if(val!='allon' && val!='off'){ if(el.classList.contains('sichtbar')){ el.classList.remove('sichtbar'); } } }) if(val!='allon' && val!='off'){ document.getElementById('box'+this.value).classList.add('sichtbar'); } }) </script> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!