Javascript getElementByID.style
Hallo, ich habe auf unserer homepage ein image mit einem onclick-Event. Das Event ruft folgende javascript-Funktion auf:
Die gewünschte Funktionalität ist, dass das Script das Field07 im Wechsel sichtbar bze. unsichtbar macht. Das wird auch gut erledigt, wenn ich von unsichtbar auf sichtbar schalte. Umgekehrt funktioniert es aber nicht. Der Code springt nicht in die "else"-Bedingung. Ich habe den Wert von AppMenH mit alert("AppMenH"); abgefragt - hier werden "hidden" und "visible" korrekt angezeigt.
Danke für Antworten!
function AppMenSwitch(){
var AppMenH = document.getElementById("Field07").style.visibilit y;
if (AppMenH = "hidden") {
document.getElementById("Field07").style.height = "inherit";
document.getElementById("Field07").style.visibilit y = "visible";
document.getElementById("MeTog").style.visibility = "hidden";
} else {
document.getElementById("Field07").style.height = "0px";
document.getElementById("Field07").style.visibilit y = "hidden";
}
}
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100vw;
height: 100vh;
align-content: space-around;
justify-content: space-around;
align-items: center;
}
figure{
max-width:300px;
border:2px solid black;
margin:30px;
text-align:center;
width:calc(50vw - 64px);
max-height:50vh;
overflow:hidden;
}
figcaption{
height:100px;
text-align:center;
padding:5px;
visibility:visible;
}
img{
width:100%;
cursor:pointer;
max-height:calc(50vh - 100px);
}
figcaption.ausgeblendet{
visibility:hidden;
}
</style>
<body>
<figure>
<img src="/image/10.png">
<figcaption>
Text Container 1 der auf unsichtbar gesetz werden soll</figcaption>
</figure>
<figure>
<img src="/image/5.png">
<figcaption>
Text Container 3 der auf unsichtbar gesetz werden soll</figcaption>
</figure>
<figure>
<img src="/image/4.png">
<figcaption>
Text Container 4 der auf unsichtbar gesetz werden soll</figcaption>
</figure>
<figure>
<img src="/image/3.png">
<figcaption>
Text Container 5 der auf unsichtbar gesetz werden soll</figcaption>
</figure>
<script>
// Klick auf das Bild läst den Text darunter verschwinden
let img_ele=document.querySelectorAll('figure');
img_ele.forEach(function(g){
g.children[0].addEventListener('click',function(){
g.children[1].classList.toggle('ausgeblendet');
})
})
</script>
</body>