显示无和块不能通过JavaScript工作

我正在开发一个单页网站，因为它在firebase的主持成本更低。我的问题是，我必须在一个HTML文件中管理不同的屏幕。所以我必须让屏幕消失，然后再出现。我想用

main_dashboard_page.style.display='none'来实现这一点和
main_dashboard_page.style.display='block'

以下是我的HTML代码：

<!-- _______________________________________________________________________________________________________________________________________ -->
    <!--                                                         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>   

当我听说css在元素的显示中具有更高的优先级时，我也会在这里发布css：

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                            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;
}  

问题：

在js中设置显示选项不起作用。首先显示这两个div，当用户登录这两个div时，将显示它们。我不知道为什么，但是你能帮我解决这个问题吗？因为网站基本完成了，我只需要将其转换为一个html文件。

提前感谢。
在中，此功能：

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

  main_dashboard_page.style.display = propValue
} 

因此，它不是js⇄css问题。（如标题所示）

深入查看您的firebase事件，在代码中添加一些
console.log（）
，以验证在您希望调用的时候实际调用了什么

一般来说，只要问题仍然存在，就试着越来越深入地隔离你的问题（删除所有不相关的杂乱内容，即你的内部和不相关的html）

我听说css在元素的显示上具有更高的优先级

不是真的从最低到最高：

浏览器默认值
外部样式表（与您的类似）
内部样式表（通常在
中）
内联样式
…javascript运行时对CSS属性的更改是
4。
，它们会更改内联样式（在运行时，在DOM构建之后，因此它们也高于预先存在的内联样式），您也可以使用浏览器的开发工具进行检查


你的问题要琐碎得多。您的
#登录(login)页面
是您的
#html(side)main
的父级，因此将其隐藏。你是一个即将结束的人。若你们想要有两个相邻的（不是嵌套的）元素，可能意味着在第63行附近

（这就是为什么减震是好的：-）

在中，这起作用：

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

  main_dashboard_page.style.display = propValue
} 

因此，它不是js⇄css问题。（如标题所示）

深入查看您的firebase事件，在代码中添加一些
console.log（）
，以验证在您希望调用的时候实际调用了什么

一般来说，只要问题仍然存在，就试着越来越深入地隔离你的问题（删除所有不相关的杂乱内容，即你的内部和不相关的html）

我听说css在元素的显示上具有更高的优先级

不是真的从最低到最高：

浏览器默认值
外部样式表（与您的类似）
内部样式表（通常在
中）
内联样式
…javascript运行时对CSS属性的更改是
4。
，它们会更改内联样式（在运行时，在DOM构建之后，因此它们也高于预先存在的内联样式），您也可以使用浏览器的开发工具进行检查


你的问题要琐碎得多。您的
#登录(login)页面
是您的
#html(side)main
的父级，因此将其隐藏。你是一个即将结束的人。若你们想要有两个相邻的（不是嵌套的）元素，可能意味着在第63行附近

（这就是为什么减震是好的：-）

我建议不要在DOM节点上使用.style。相反，我建议在css中创建一个类，如：

.display-none {
    display: none;
}

然后通过javascript添加类：

login_page.className += " display-none";

这样，您的所有样式都将出现在css中，而不是javascript中。我建议不要在DOM节点上使用.style。相反，我建议在css中创建一个类，如：

.display-none {
    display: none;
}

然后通过javascript添加类：

login_page.className += " display-none";

这样，您的所有样式都将出现在css中，而不是javascript中。请看这个。这就是修改过的代码！这就是我的问题！但为什么会发生这种情况，以及如何解决@Micheal Nocke，当您单击SetToNone[LOGIN]按钮时，您可以看到这两个视图都消失了吗？为什么？请看这个。这就是修改过的代码！这就是我的问题！但为什么会发生这种情况，以及如何解决@Micheal Nocke，当您单击SetToNone[LOGIN]按钮时，您可以看到这两个视图都消失了吗？为什么？