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?
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>