I have two div's that I want to show or hide (one hidden and one shown) if we click on any of several buttons grouped in a class. That is, when you click on .enlaces you must change the display from one to "flex" and from another to "none" and when you click again on .enlaces you must do the opposite operation (change the display from one to "none" and from another to "flex"). So far so good. My problem is that when I click for the first time it works but it no longer pays attention to the event.
var links = document.getElementsByClassName('enlaces');
for(var i = 0; i < links.length; i++){
var cuatro = document.getElementById("cuatro");
var tres = document.getElementById("tres");
links[i].addEventListener('click', function(){
if(tres.style.display = "flex"){
tres.style.display = "none";
cuatro.style.display = "flex";
}else{
tres.style.display = "flex";
cuatro.style.display = "none";
}
})
}
*{
box-sizing: border-box;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body{
font-family: 'Raleway', sans-serif;
}
header nav{
background-color:#262626;
}
header ul{
list-style: none;
display: flex;
justify-content: space-around;
margin: 0 auto;
padding: 0.5%;
width: 30%;
}
header li{
color: white;
text-transform: capitalize;
}
.enlaces{
text-decoration: none;
}
header img{
width: 100vw;
position: relative;
}
#absolute{
width: 60%;
padding: 1%;
position: absolute;
top: 30%;
left: 20%;
background-color: #3D3D3D;
opacity: 0.7;
border: 2px solid white;
border-radius: 5px;
text-align: center;
color: white;
}
hr{
border: 2px solid #262626;
background-color:#262626;
min-height: 10px;
}
#tres, #cuatro{
display: flex;
justify-content: space-around;
margin: 2%;
}
#tres div, #cuatro div{
width: 19.1%;
}
#tres h4, #cuatro h4{
text-transform: capitalize;
margin: 3% 0 3% 0;
}
#cuatro{
display: none;
}
footer{
background-color: #262626;
color: white;
text-align: center;
}
footer p{
padding: 1%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway:400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
<nav>
<ul>
<a class="enlaces" href="#">
<li>home</li>
</a>
<a class="enlaces" href="#">
<li>foo</li>
</a>
<a class="enlaces" href="#">
<li>blar</li>
</a>
<a class="enlaces" href="#">
<li>sudo</li>
</a>
<a class="enlaces" href="#">
<li>testimonials</li>
</a>
<a class="enlaces" href="#">
<li>contact</li>
</a>
</ul>
</nav>
<img src="img/ancha.jpg" alt="cabecera">
<div id="absolute">
<h3>Hello World</h3>
<p>- A blurlb about life would go well here -</p>
</div>
</header>
<hr>
<section id="tres">
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
</section>
<section id="cuatro">
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
</section>
<footer>
<p>Made for you by Alvaro Torres</p>
</footer>
</body>
</html>
As always, thank you very much
TL;DR:
One was missing
=
to be able to compare:Regarding the comment:
Even though we have a CSS rule that applies a
display
for that element, you can see how the.style.display
returns""
.This does NOT mean that if it
document.getElementById("myDiv").style.display;
returns""
adisplay
, simply that JS does not know about it, so if there is a CSS rule, this is applied.So you could put it back by
display:flex;
doing:How can it be solved in this case:
<section id="tres" style="display:flex;">
""
since you assume that the CSS rule is applied and then in theelse
return to thedisplay
defaulttres.style.display = "";
Comparison
getComputedStyle
,currentStyle
for IE:Snippet with
""
:OS Related
SO Answer (myDiv.style.display returns blank when set in master stylesheet)
SO Answer (What does style.display = "" actually do?)