2

Tengo dos div que quiero mostrar u ocultar (uno oculto otro mostrado) si hacemos click en cualquiera de varios botones agrupados en una clase. Es decir, al hacer click en .enlaces debe cambiar el display de uno a "flex" y de otro a "none" y al hacer click de nuevo en .enlaces debe hacer la operación contraria (cambiar el display de uno a "none" y de otro a "flex"). Hasta aquí bien. Mi problema es que al hacer click por primera vez funciona pero ya no vuelve a hacer caso al evento.

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>

Como siempre, mil gracias

5
  • Puedes completar tu código con el html más? Ayudará a ejecutar el comportamiento dentro de esta página Commented el 28 oct. 2019 a las 5:05
  • hecho Saludos :D Commented el 28 oct. 2019 a las 6:32
  • 1
    Te falta un = para poder comparar, if(tres.style.display == "flex"). Y al principio tres.style.display es "".
    – x3k
    Commented el 28 oct. 2019 a las 7:21
  • Muchísimas gracias @x3k_js. A veces las torpezas hacen perder tiempo :D Lo que no entiendo es lo que dices de: Y al principio tres.style.display es "" Ahora que he solucionado esto solo funciona cuando doy un segundo click. En el primero no hace nada. Sabes por qué? Gracias Commented el 28 oct. 2019 a las 7:30
  • 1
    Al ponerle el CSS de display:flex mediante el selector de ID, no se lo pones directamente al elemento, estas creando una regla css. Entonces si haces document.getElementById("tres").style.display te devolvera "" (que implica que tiene el display de esa regla). Después del primer click, el flex se lo pones directamente al elemento (en el else) por lo que la comparativa si que es true y se cambian los displays. Para resolver esto puedes ponerle directamente el style en la etiqueta html, o tambien puedes hacer la comparativa con =="" y en el else tres.style.display = ""
    – x3k
    Commented el 28 oct. 2019 a las 7:38

1 respuesta 1

2

TL;DR:

Faltaba un = para poder comparar:

if(tres.style.display == "flex")

Respecto al comentario:

Lo que no entiendo es lo que dices de: Y al principio tres.style.display es "" Ahora que he solucionado esto solo funciona cuando doy un segundo click. En el primero no hace nada.

Aunque tengamos una regla CSS que aplique un display para ese elemento, se puede ver como el .style.display devuelve "".

console.log("Display: "+document.getElementById("myDiv").style.display);
#myDiv{
  display: flex;
}
<div id="myDiv">
  Asd
</div>

Esto NO significa que si document.getElementById("myDiv").style.display; devuelve "" no se este aplicando un display, simplemente que JS no lo conoce, por lo que si hay una regla CSS se aplica esta.

Por lo que se podría volver a poner el display:flex; haciendo:

document.getElementById("myDiv").style.display = "";

console.log("Display: "+document.getElementById("myDiv").style.display);

function toggleDisplay(){
    if(document.getElementById("myDiv").style.display == ""){
        document.getElementById("myDiv").style.display = "none";
        console.log("Display: "+document.getElementById("myDiv").style.display);
    } else{
        document.getElementById("myDiv").style.display = "";
        console.log("Display: "+document.getElementById("myDiv").style.display);
    }  
}
#myDiv{
  display: flex;
}
<button id="toggle" onclick="toggleDisplay()">Toggle</button>
<div id="myDiv">
  Asd
</div>


Como se puede resolver en este caso:

  • Ponerle el estilo CSS al elemento HTML <section id="tres" style="display:flex;">
  • Comparar con "" ya que das por hecho que se aplica el de la regla CSS y después en el else volver a poner el display por defecto tres.style.display = "";
  • Comprobar la primera vez el computed style con getComputedStyle

Comparación getComputedStyle, currentStyle para IE:

tres.currentStyle 
? tres.currentStyle["display"] 
: window.getComputedStyle 
? window.getComputedStyle(tres, null).getPropertyValue("display") 
: null;

Snippet con "":

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 == ""){
            tres.style.display = "none";
            cuatro.style.display = "flex";
        }else{
            tres.style.display = "";
            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>


Relacionado SO

Respuesta SO (myDiv.style.display returns blank when set in master stylesheet)

Respuesta SO (What does style.display = "" actually do?)

1
  • Perfecto!! Muchísimas gracias por la explicación. Me ha quedado bien claro :D Commented el 28 oct. 2019 a las 11:20

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.