true-false Boolean

Hi, Wenn der Text und das Bild beide sichtbar werden, soll der 2 Button angezeigt werden. Ich habe das jetzt mit True-False versucht, bin aber am verzweifeln, weil der 2. Button nicht angezeigt wird. Kann mir jemand helfen?

Der hier verwendete Code

<!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; box-sizing:border-box; overflow:hidden; } body{ width:100%; max-width:900px; padding:20px; display:flex; margin:0 auto; flex-direction:column; } main{ min-height:100px; display:flex; flex-direction:column; border-radius:10px; border:1px solid black; } #bildconti{ width:100%; display:flex; } #buttonconti{ width:100%; display:flex; height:30px; border-radius:10px; border:1px solid black; margin-top:10px; } #texte{ width:100%; display:flex; height:30px; border:1px solid black; } #last_button_arena{ display:block; margin-top:10px; text-align:center; } #last_button_arena *{ width:100%; height:30px; border:2px solid black; background:rgba(0,255,0,0.6); border-radius:10px; } #bildconti img{ width:calc(100% / 3); min-height:70px; border:1px solid red; } #buttonconti *{ flex:1; } #texte p{ flex:1; text-align:center; border:1px solid red; } #derletzte,.aus{ display: none; } .an{ display:block; } </style> </head> <body> <main> <div id="bildconti"> <img class="aus" src="image/2.png"> <img class="aus" src="image/3.png"> <img class="aus" src="image/4.png"> </div> <div id="texte"> <p class="aus"> Dein Text 1</p> <p class="aus"> Dein Text 2</p> <p class="aus"> Dein Text 3</p> </div> </main> <div id="buttonconti"> <button>Bild 1</button> <button>Bild 2</button> <button>Bild 3</button> <button>löschen</button> <button>text 1</button> <button>text 2</button> <button>text 3</button> </div> <div id="last_button_arena"> <button id="derletzte">Dein letzten button</button> </div> <script> bild_con=document.querySelector('#bildconti'); texte_con=document.querySelector('#texte'); but=document.querySelectorAll('button'); the_last=document.getElementById('derletzte'); for_kill=document.querySelectorAll('#bildconti>img,#texte>p'); but.forEach(function(r,ix){ var allaus=false; r.addEventListener('click',function(){ if(ix==0 || ix==1 || ix==2){ bild_con.children[ix].classList.toggle('an'); }else if(ix==3){ allaus=true; }else if(ix==4 || ix==5 || ix==6){ texte_con.children[ix-4].classList.toggle('an'); } the_last.style.display='block'; for_kill.forEach(function(f){ if(allaus==true){ f.setAttribute('class','aus') } if_block=f.classList.contains('an'); if(if_block==false){ the_last.style.display='none'; } }) }) }) the_last.addEventListener('click',function(){ alert('in diesen Beispiel keine funktion'); }); </script> </body> </html>

Add Comment

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

Comments

No comments yet. Be the first!