Display none and block does not work via JavaScript

Question

I am developing a single-page-website because it's cheaper at firebase to host. My problem is that I must manage different screens at the single HTML file. So I must make screens disappear and appear again. I want to do this with main_dashboard_page.style.display = 'none'; and main_dashboard_page.style.display = 'block';.
Here is my HTML code:

<!-- _______________________________________________________________________________________________________________________________________ -->
    <!--                                                         L O G I N  P A G E                                                              -->
    <!-- _______________________________________________________________________________________________________________________________________ -->

    <div class="login_page" id="login_page">

    <div class="card_view">
      <div class="login_container" id="login_container">
        <div class="wrap_login">
          <div class="login_form validate-form">

            <span class="login_form_title p-b-26">
                        Login
                    </span>

            <div>
              <label for="email_field">E-Mail</label>
              <input type="text" id="email_field" name="email_field" placeholder="E-Mail">

              <label for="password_field">Passwort</label>
              <input type="password" id="password_field" name="password_field" placeholder="Passwort">

              <input type="submit" value="Einloggen" onclick="login()">
            </div>

                    <div class="center_text_container p-t-115">
                        <span class="txt1">
                            Du hast noch keinen Account?
                        </span>

                        <a class="txt2" onclick="goToSignUp()">
                            Registrieren
                        </a>
          </div>

       <div class="modal">
            <div class="modal-content">
              <h1 id="msg_title"><h1>
              <p id="msg_content"></p>
              <div id="lds-ellipsis" class="lds-ellipsis" style="display: none;"><div></div><div></div><div></div><div></div></div>
            </div>
          </div>

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

  <!-- _______________________________________________________________________________________________________________________________________ -->
  <!--                                                         M A I N  P A G E                                                                -->
  <!-- _______________________________________________________________________________________________________________________________________ -->

  <div class="html_side_main" id="html_side_main">

    <div class="toolbar">
      <div class="centered_toolbar">
        <img src="../images/logo.png" width="200px" height="auto" style="position: absolute; left: 0px; margin-left: 30px;"></img>
        <ul>
          <li class="active"><a href='../main/main_index.html'><i class="dashboard"></i>Dashboard</a></li>
          <li><a href='../notenliste/notenliste.html'><i class="notenliste"></i>Notenliste</a></li>
        </ul>
        <a href='#' onclick="logout()" style="position: absolute; right: 0px; margin-right: 20px;"><i class="logout"></i>Logout</a>
    </div>

    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>

  </div>

    <div class='main'>
      <div class='main_padding'>
        <div class='noten_stats'>
          <p class="noten_stats_title">alpha_version: 1.0</p>
          <div class="punkte_container">
            <span class="punkte"></span>
            <span class="punkte_text">Willkommen zur alpha version von kaffboard! Der Support ist rund um die Uhr erreichbar: raycroud@gmail.com</span>
          </div>
        </div>
      </div>
    </div>
  </div>   

As you can see I have two screens, which are represented as the divs:
1) ID: login_page
2) ID: html_side_main
Now the login_page should disapear and the html_side_main should appear, when user is logged in. I chek it with firebase as you could see in js:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    changePage();
  }
  else {
    var main_dashboard_page = document.getElementById("html_side_main");
    main_dashboard_page.style.display = 'none';
  }
});

function changePage() {
  if (document.readyState === "complete") {
  var login_page = document.getElementById("login_page");
  var register_page = document.getElementById("register_page");
  var main_dashboard_page = document.getElementById("html_side_main");

  login_page.style.display = 'none';
  main_dashboard_page.style.display = 'block';

}   

As I heared that the css has a higher priority in the display of elements I would post the CSS here too:

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                            F O N T                                          */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

@font-face {
  font-family: Poppins-Regular;
  src: url('../public/fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../public/fonts/poppins/Poppins-Medium.ttf');
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../public/fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('../public/fonts/poppins/Poppins-SemiBold.ttf');
}



* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Poppins-Regular, sans-serif;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                     L O G I N  P A G E                                      */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
  color: #6a7dfe;
  color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
  color: -o-linear-gradient(left, #21d4fd, #b721ff);
  color: -moz-linear-gradient(left, #21d4fd, #b721ff);
  color: linear-gradient(left, #21d4fd, #b721ff);
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
    margin: 0px;
}

label {
  color: #fff;
}

p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul, li {
    margin: 0px;
    list-style-type: none;
}


/*---------------------------------------------*/
input {
    outline: none;
    border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}


button {
    outline: none !important;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

iframe {
    border: none !important;
}



.card_view {
  width: 100%;
  margin: 0 auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 9px; /* 5px rounded corners */
}

.login_container {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-color: rgba(38, 38, 38, 1);
}

.wrap_login {
  width: 390px;
  background-color: rgba(48, 48, 48, 1);
  border-radius: 10px;
  overflow: hidden;
  padding: 77px 55px 33px 55px;

  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
    border-radius: 9px 9px 0 0;
}

.container {
    padding: 2px 16px;
}

/*------------------------------------------------------------------
[ Form ]*/

.login_form {
  width: 100%;
}

.login_form_title {
  display: block;
  font-family: Poppins-Bold;
  font-size: 30px;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}
.login_form_title i {
  font-size: 60px;
}

input, select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid rgba(48, 48, 48, 1);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: rgba(38, 38, 38, 1);
}

input[type=submit] {
    background-color: rgba(6, 132, 134, 255);
    font-family: Poppins-Medium;
}

input[type=submit]:hover {
    background-color: rgba(8, 160, 163, 255);
    cursor: pointer;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(92, 92, 92, 1);
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(92, 92, 92, 1);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(92, 92, 92, 1);
}

input, select, textarea{
    color: #fff;
}

/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
  font-family: Poppins-Regular;
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
}

.txt2 {
  font-family: Poppins-Regular;
  font-size: 13px;
  color: #fff;
  line-height: 1.5;
  cursor: pointer;
}

.txt2:hover {
  color: rgba(6, 132, 134, 255);
}

.center_text_container {
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                     M A I N  P A G E                                        */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.html_side_main {
  float: left;
  height: auto;
  width: 100%;
}

.html_side_main {
  height: 100%;
}

/*TOOLBAR*/

.html_side_main .toolbar {
  list-style-type: none;
  height: 90px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(48, 48, 48, 1);
}

.html_side_main .centered_toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.html_side_main ul {
  list-style-type: none;
  list-style: none;
}

.html_side_main li {
  float: left;
}

.html_side_main a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.html_side_main a:hover {
  color: #cccccc;
}

/* MAIN */

.html_side_main .main_padding {
  padding: 15px;
  width: 100%;
}

.html_side_main .noten_stats {
  height: 200px;
  background: #cc2b5e;
  background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
  background: linear-gradient(to right, #753a88, #cc2b5e);
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ddd;
}

.html_side_main .noten_stats_title {
  color: #ffffff;
  padding: 20px;
  font-family: Montserrat-Medium;
}

.html_side_main .punkte_container{
  height: 80%;
  margin: auto;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.html_side_main .punkte {
  color: #ffffff;
  font-size: 50px;
  font-family: Montserrat-Bold;
}

.html_side_main .punkte_text {
  color: #ffffff;
  font-family: Montserrat-Medium;
}  

PROBLEM:
To set the display option in js does not work. First both of the divs are shown and when user logged in both of them disapear. I don't know why, but please can you help me to fix this this problem? Because the website is basicly finished, and I only have to convert it to a one html file.
Thanks in advance.

Answer 1

I would recommend to not use .style on a DOM node. Instead, I would recommend to create a class in css like:

.display-none {
    display: none;
}

and then add the class via javascript:

login_page.className += " display-none";

That way you will have all your styles in your css and not in your javascript

Answer 2

In isolation of a codepen, this works:

function setStyle(propValue){
  console.log(propValue)
  var main_dashboard_page = document.getElementById("html_side_main");

  main_dashboard_page.style.display = propValue
} 

Thus it is not a js⇄css problem. (as your title suggests)

Look deeper into your firebase events, add some console.log() into the code to verify, things actually get called, when you expect them to.

Generally, try to isolate your problem further and further (remove all unrelated clutter, i.e. your inner and unrelated html) as long as the problem persists...

As I heared that the css has a higher priority in the display of elements

Not true. Precedence is from lowest to highest:

1. Browser default
2. External style sheet (like yours)
3. Internal style sheet (commonly in <head>)
4. Inline style

...javascript runtime changes of CSS properties are a 4., they change the inline styles (at runtime, after DOM construction, so they are also higher than pre-exisiting inline styles), as you can also inspect with your browser's dev tools.

---

Your problem is much more trivial. Your #login_page is a parent of your #html_side_main, thus hiding it hides all. You are one closing </div> short. If your intend is to have two neighbouring (not nested) elements, probably meant to be somewhere around line :63.

(This is, why isolation aka damping down is good :-)