1

estoy tratando de hacer un botón que al presionarse se le añade una clase a un determinado div que le otorgará la propiedad de css:

display:none;

Y le pondrá a otro div otra propiedad:

display: block;

Pero a la hora de hacer la ejecución simplemente no hace nada, dejo aquí los codes:

UPDATE DE CODES

HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Admin Panel</title>
    <meta charset="utf-8" />
    <link href="./assets/css/styles.css" rel="stylesheet" />
    <link href="./assets/css/font-awesome/css/all.min.css" rel="stylesheet" />
    <script src="./assets/js/jquery-3.5.1.min.js"></script>
    <script src="./assets/js/func.js"></script>

</head>
<body>

    <div class="root">
        <div class="principal-site"> <!-- Not finished-->
            <div class="principal-site-header-div">
                <header class="principal-site-header">

                    <span class="principal-site-header-title">    Supremassy Aortical Panel             </span>
                    <div class="principal-site-header-btn-div">
                        <input type="button" class="principal-site-header-btn-declarations" value="D e d i c a c i o n e s " id="declarations_js"> 

                        <button class="principal-site-header-btn-pruebas"> Pruebas        </button>

                    </div>
                </header>
            </div>



        <div class="principal-site-home" id="principal-site-home">

            <div class="principal-site-home-welcome">
                <p class="principal-site-home-welcome">
                    Bienvenido <!--<?php funcion para obtener nick?>--> <br />

                </p>
            </div>
                <div class="principal-site-home-time">
                    <span class="principal-site-home-span"><!--<?php funcion para recordar dormir y eso--></span>
                </div>
                
            <div class="principal-site-home-rank">
                <span class="principal-site-home-span"> Rango: <!-- Función para obtener el rank de privilegios-->    </span>
            </div>
        
            <div class="principal-site-home-body">

            </div>
        </div>



        </div>
        <div class="principal-site-declarations " id="principal-site-declarations">

            <span class="principal-site-declarations-span">Funciona! </span>
        </div>
        


    




    <div class="panel-side">
        <br />
        <br />
        <br />
        <div class="panel-side-letter-div">
            <span class="panel-side-letter_t">
                ☃️BienVenido <!--<?php //Función de obtener usuario ?>-->☃️
            </span>
        </div>
        <div class="panel-side-img-div"><span class="panel-side-img"> <img class="panel-side-img-s" align="middle" src="./assets/img/imagen.png" />  </span></div>


        <div class="panel-side-usuarios">
            <hr />
            <span class="panel-side-letter"><i class="fas fa-user"></i> Usuarios Recientemente registrados <i class="fas fa-chevron-right"></i></span>

            <hr />
        </div>
        <div class="panel-side-letter-bot-div">
            <hr class="hr-disappear" />
            <span class="panel-side-letter"><i class="fas fa-robot"></i> Bots Bloqueados <i class="fas fa-chevron-right"></i></span>
            <hr />
        </div>
        <div class="panel-side-letter-login-div">
            <hr class="hr-disappear" />
            <span class="panel-side-letter">Logs <i class="fas fa-chevron-right"></i></span>
            <hr />
        </div>
        <div class="panel-side-letter-websitecheck-div">
            <hr class="hr-disappear" />
            <span class="panel-side-letter"> <i class="fas fa-lock"></i> My Website Check <i class="fas fa-chevron-right"></i>    </span>
            <hr />
            </div>
            <div class="panel-side-copyright">
                <div class="panel-side-letter_c-div"><span class="panel-side-letter_c">Hecho Por <span class="panel-side-letter-supremassy">ssnoverify</span></span></div>
                <div class="panel-side-contact-container">
                    <p class="panel-side-letter-contact">Contáctame:</p>
                    <br />
                    <div class="panel-side-list-items-div">
                        <ul class="panel-side-unorganizated-contact-list">

                            <li class="panel-side-list-items"> <i class="fab fa-telegram"></i>@volatilidad     </li>
                        </ul>
                    </div>


                </div>


            </div>


        </div>









        </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Mohave:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@300&display=swap');
html {
    background-color: #808080;
    
    

}
.panel-side {
    /*Letter*/
    font-family: 'Mohave', sans-serif;
    /*Table shit*/
    width: 26%;
    height: 65%;
    /*Border shit*/
    border: 2px solid;
    border-radius: 6px;
    border-color: snow;
    /*Method to panel portal not going down by scroll bar*/
    display: block;
    /*Margins to full-fill page*/
    margin-left: -0.40%;
    margin-top: -40%;
    /*We apply another color to difference what's the panel bar and the page*/
    background-color: white;
    box-shadow: 0 0 40px snow;
}




.panel-side-img-s{
    /*We apply this for stylize the img*/
    width: 23%;
    

}

.panel-side-img-div{
    margin-left: 36%;
    margin-top: 7%;

}

.panel-side-letter-div {
    margin-top: -4%;
    margin-left: 31%;
}
.panel-side-usuarios {
    margin-top: 16%;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    
}
    .panel-side-usuarios:hover,
    .panel-side-usuarios:active {
        background-color: #f4f4f4;
        text-transform: uppercase;
        font-weight: 500;
    }


.panel-side-letter{
    margin-left: 22%;
}

.hr-disappear{
    border: none;
    margin-top: -2%;
}
/* Panel Side Effects working at Microsoft Edge and partially in Google Chrome*/
.panel-side-letter-bot-div,
.panel-side-letter-login-div,
.panel-side-letter-websitecheck-div {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
    .panel-side-letter-bot-div:hover,
    .panel-side-letter-bot-div:active,
    .panel-side-letter-login-div:hover,
    .panel-side-letter-login-div:active,
    .panel-side-letter-websitecheck-div:hover,
    panel-side-letter-websitecheck-div:active {
        background-color: #f4f4f4;
        text-transform: uppercase;
        font-weight: 500;
    }

/*    This is the general copyright container, if you want to edit something related to ALL the objects at in, I'd 
    recommend you to edit this container, in other case, create another div with a different class to do it specifically.
*/
.panel-side-copyright {
    margin-left: 33%;
    margin-top: 7%;
}


/*    This is the specific "Hecho por ssnovierify" copyright div.      */
.panel-side-letter_c-div{
    margin-bottom: 14%;
    margin-top: -8%;
}
.panel-side-unorganizated-contact-list {
    list-style: none;
    margin-right: -35%;
    margin-left: -11%;
}


.panel-side-letter-contact{
    margin-top: -10%;
    margin-bottom: 23%;
}
.panel-side-list-items {
    margin-top: -20%;
}

/*   Principal styles of the header.   */
.principal-site-header-div {
    width: 74%;
    height: 13%;
    background-color: ghostwhite;
    border: 2px solid;
    border-color: snow;
    position: absolute;
    top: 0px;
    margin-left: 25.2%;
    padding: 0;
    box-shadow: 0 0 40px snow;
    border-radius: 6px;
}
.principal-site-header-title {
    font-family: 'Red Hat Mono', monospace;
    margin-left: 0%;
    margin-right: 0%;
}


/* Margins of header buttons*/
.principal-site-header-btn-declarations{

    margin-top: 3%;
    margin-left: 10%;
}

.principal-site-header-btn-pruebas{
    margin-left: 27%;
}

/*Styles of Buttons*/
.principal-site-header-btn-declarations {
    width: 10%;
    height: 32%;
    background-color: white;
    color: royalblue;
     border: none;
    box-shadow: 0 0 40px snow;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

/*color: #fff;
  background-color: #007bff;*/
    .principal-site-header-btn-declarations:hover,
    .principal-site-header-btn-declarations:active,
    .principal-site-header-btn-declarations:focus {
        color: #FFD700;
        text-transform: uppercase;
        background-color: #000000;
        font-size: 1.2em;
        width: 13%;
        height: 34%;
        
    }

.principal-site-home{
    background-color: whitesmoke;
    margin-left: 25.4%;
    height: 89%;
    margin-top: 6.7%;
    width: 75%;
}

#principal-site-declarations {
    display: none;
}

Jquery:

$("#declarations_js").on('click', function () {
    document.getElementById("principal-site-declarations").style.display = "block";
    document.getElementById("principal-site-home").style.display = "none";

});
9
  • puedes intentar agregandole type="button" a tu boton a ver si con eso funciona
    – R.Nuñez
    Commented el 10 nov. 2021 a las 22:44
  • @R.Nuñez lo acabo de probar, sigue sin funcionar
    – Ssnov
    Commented el 10 nov. 2021 a las 22:46
  • @R.Nuñez no tiene nada que ver ...
    – user46896
    Commented el 10 nov. 2021 a las 22:46
  • si tiene que ver por que algunas veces lanza el post, puedes de perdida especificar que errores te regresa en consola?
    – R.Nuñez
    Commented el 10 nov. 2021 a las 22:47
  • dale click derecho y ve a inspeccionar código y fijate que CSS esta tomando el elemento ... es muy probable que te falte algo ... o que algo este mal escrito ... el problema es que no sabemos que CSS esta afectando tus elementos veo varias clases aplicadas antes de que se ejecute tu script por lo tanto debes aclarar esos detalles...
    – user46896
    Commented el 10 nov. 2021 a las 22:47

2 respuestas 2

1

Functiona perfectamente, intenta no mezclar jQuery con Vanilla JS, aunque no hay problema en principio en hacerlo.

Puede utilizar built-in function como show() and hide().

$("#declarations_js").on('click', function () {
      $("#principal-site-declarations").show();
      $("#principal-site-home").hide();
});
#principal-site-declarations {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="principal-site-home" id="principal-site-home">
    <button class="principal-site-header-btn-declarations" id="declarations_js"> D e d i c a c i o n e s </button>

    <div class="principal-site-home-welcome">
        <p class="principal-site-home-welcome">
            Bienvenido<br />
        </p>
    </div>
        
    <div class="principal-site-home-rank">
        <span class="principal-site-home-span"> Rango:</span>
    </div>
</div>

<div class="principal-site-declarations " id="principal-site-declarations">
    <span class="principal-site-declarations-span">Funciona!</span>
</div>

Este es un ejemplo que no require jQuery:

const prinHome = document.querySelector('#principal-site-home');
const prinDecl = document.querySelector('#principal-site-declarations');
const btn = document.querySelector('button.principal-site-header-btn-declarations');

btn.addEventListener('click', ()=>{

  prinHome.style.display = 'none';
  prinDecl.style.display = 'block';
    
});
#principal-site-declarations {
  display: none;
}
<div class="principal-site-home" id="principal-site-home">
    <button class="principal-site-header-btn-declarations" id="declarations_js"> D e d i c a c i o n e s </button>

    <div class="principal-site-home-welcome">
        <p class="principal-site-home-welcome">
            Bienvenido<br />
        </p>
    </div>
        
    <div class="principal-site-home-rank">
        <span class="principal-site-home-span"> Rango:</span>
    </div>
</div>

<div class="principal-site-declarations " id="principal-site-declarations">
    <span class="principal-site-declarations-span">Funciona!</span>
</div>

8
  • He estado probando y no ha funcionado. Me he dado cuenta que mi code HTML es diferente al tuyo, el mío tiene más divs y eso, voy a editar la pregunta con todo mi code html y css porque capaz es algo relacionado con algún div
    – Ssnov
    Commented el 11 nov. 2021 a las 18:32
  • @galaixagalicia, vez algun error en el console? Commented el 11 nov. 2021 a las 18:40
  • No, lo que aprecio que creo que es nuevo es que me aparece en un documento el code de html sin sintetizar con css
    – Ssnov
    Commented el 11 nov. 2021 a las 18:41
  • Y no tiene ningun error 404? Commented el 11 nov. 2021 a las 18:42
  • 1
    ay va jejejeje, no tenía el code incluido en el document.ready, acabo de probar y ahora sí que funciona, gracias jefe!
    – Ssnov
    Commented el 11 nov. 2021 a las 18:48
-1

el problema es que estas combinando javascript nativo y puro con jquery, no puedes utilizar cosas como getElementById o un .style, en vez de eso prueba algo como esto:

$("#declarations_js").on('click', function () {
    $("#principal-site-declarations").css({"display":"block"});
    $("#principal-site-home").css({"display":"none"});

});

Acá se utilizan las formas $('#id') y .css() pertenecientes a JQuery. Ya lo probé y funciono bien, espero te sirva.

2
  • 1
    Claro que puede combinar javascript puro con jquery, mientras la sintaxis sea correcta, claro. Otra cosa es que sea una tontería escribir tanto cuando tienes jquery cargado y puedes escibir instrucciones más cortas y sencillas. Commented el 11 nov. 2021 a las 11:49
  • Hola, gracias por responder. No he podido lograr hacerlo, sigue sin aparecerme nada. Voy a actualizar la pregunta con mi código entero por si acaso fuera algo de los divs o de los styles.
    – Ssnov
    Commented el 11 nov. 2021 a las 18:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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