Javascript Appear（）函数无法运行，而Hide（）可以运行

Question

我的问题是Hide函数可以完美运行，而Appear函数却不能。 我有2个面板：一个用于注册，一个用于注册，我希望如果用户单击注册按钮，则登录面板消失，注册器出现在与登录相同的位置。

我有以下代码：

HTML：

    function Hide() {
      	var x = document.getElementById("bejelentkezes");
      	if (x.display.style === "block") {
      		x.display.style = "none";
      	}
    }
    
    function Appear() {
    	var y = document.getElementById("regisztracio");
    	if (y.display.style === "none") {
    		y.display.style = "block";
    	}
    }

<div id="bejelentkezes">
            <div class="card">
              <h5 class="card-header">Bejelentkezés</h5>
              <div class="card-body">
                <form>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email cím</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
                    
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Jelszó</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Jelszó">
                  </div>
                  <button type="submit" class="btn btn-dark">Bejelentkezés</button>
                  <br>
                  <a href="#" class="btn reg" onclick="Hide();Appear();">Regisztráció</a>
                </form>
              </div>
            </div>
      </div>

      <div id="regisztracio" style="display:none;">
            <div class="card">
              <h5 class="card-header">Regisztráció</h5>
              <div class="card-body">
                <form>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email cím</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
                    
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Jelszó</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Jelszó">
                  </div>
                  <button type="submit" class="btn btn-dark">Bejelentkezés</button>
                  <br>
                  <a href="#" class="btn reg" onclick="Hide()">Regisztráció</a>
                </form>
              </div>
            </div>
      </div>

Answer 1

语法是

element.style.display=value

不是

element.display.style=value

function Hide() {
      	var x = document.getElementById("bejelentkezes");
      	if (x.style.display === "block") {
      		x.style.display = "none";
      	}
    }
    
    function Appear() {
    	var y = document.getElementById("regisztracio");
    	if (y.style.display === "none") {
    		y.style.display = "block";
    	}
    }

<div id="bejelentkezes">
            <div class="card">
              <h5 class="card-header">Bejelentkezés</h5>
              <div class="card-body">
                <form>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email cím</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
                    
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Jelszó</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Jelszó">
                  </div>
                  <button type="submit" class="btn btn-dark">Bejelentkezés</button>
                  <br>
                  <a href="#" class="btn reg" onclick="Hide();Appear();">Regisztráció</a>
                </form>
              </div>
            </div>
      </div>

      <div id="regisztracio" style="display:none;">
            <div class="card">
              <h5 class="card-header">Regisztráció</h5>
              <div class="card-body">
                <form>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email cím</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
                    
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Jelszó</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Jelszó">
                  </div>
                  <button type="submit" class="btn btn-dark">Bejelentkezés</button>
                  <br>
                  <a href="#" class="btn reg" onclick="Hide()">Regisztráció</a>
                </form>
              </div>
            </div>
      </div>

Refer

Answer 2

一种实现切换功能的更好方法。

window.addEventListener('DOMContentLoaded', () => {

            document.querySelectorAll('.reg').forEach(function (elem) {
                elem.addEventListener('click', function (e) {
                    var x = document.getElementById("bejelentkezes");
                    var y = document.getElementById("regisztracio");
                    if (y.style.display === "none") {
                        y.style.display = "block";
                        x.style.display = "none";
                    } else {
                        y.style.display = "none";
                        x.style.display = "block";
                    }
                })
            });
        });

<div id="bejelentkezes">
    <div class="card">
        <h5 class="card-header">Bejelentkezés</h5>
        <div class="card-body">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email cím</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                        placeholder="Email">

                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Jelszó</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Jelszó">
                </div>
                <button type="submit" class="btn btn-dark">Bejelentkezés</button>
                <br>
                <a href="#" class="btn reg">Regisztráció</a>
            </form>
        </div>
    </div>
</div>

<div id="regisztracio" style="display:none;">
    <div class="card">
        <h5 class="card-header">Regisztráció</h5>
        <div class="card-body">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email cím</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                        placeholder="Email">

                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Jelszó</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Jelszó">
                </div>
                <button type="submit" class="btn btn-dark">Bejelentkezés</button>
                <br>
                <a href="#" class="btn reg">Regisztráció</a>
            </form>
        </div>
    </div>
</div>

Answer 3

1. 您无法获得或设置自己想要的y.display.style y.style.display（显示是样式的属性，而不是相反的属性）。
2. 根据您的代码，您应该使它更简单和可维护，我将使用一个功能-HandleView()，它将检查面板的状态并激活Hide()和Appear() 。请看我的建议。

LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--remove comment to use jquery-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <style>
    </style>
  </head>
  <body>
    <div id="bejelentkezes">
      <div class="card">
        <h5 class="card-header">Bejelentkezés
        </h5>
        <div class="card-body">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email cím
              </label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Jelszó
              </label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Jelszó">
            </div>
            <button type="submit" class="btn btn-dark">Bejelentkezés
            </button>
            <br>
            <a href="#" class="btn reg" onclick="HandleView()">Regisztráció
            </a>
          </form>
        </div>
      </div>
    </div>
    <div id="regisztracio" style="display:none;">
      <div class="card">
        <h5 class="card-header">Regisztráció
        </h5>
        <div class="card-body">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email cím
              </label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Jelszó
              </label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Jelszó">
            </div>
            <button type="submit" class="btn btn-dark">Bejelentkezés
            </button>
            <br>
            <a href="#" class="btn reg" onclick="HandleView()">Regisztráció
            </a>
          </form>
        </div>
      </div>
    </div>
  </body>
  <script>
    function Hide(elem) {
      elem.style.display = "none";
    }
    function Appear(elem) {
      elem.style.display = "block";
    }
    function HandleView()
    {
      var y = document.getElementById("regisztracio");
      var x = document.getElementById("bejelentkezes");
      if (y.style.display === "none") {
        Appear(y);
        Hide(x);
      }
      else
      {
        Appear(x);
        Hide(y);
      }
    }
  </script>
</html>