Javascript Appear() 函数不运行,而 Hide() 运行

标签 javascript html css

我的问题是隐藏功能运行完美,但出现功能运行不正常。 我有 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>

最佳答案

语法是

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

关于Javascript Appear() 函数不运行,而 Hide() 运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56074894/

相关文章:

javascript - 我如何在html中将两个给定数字加在一起

html - 你能设计一个 noscript 元素吗?

html - CSS:使自动div的宽度扩展到定位元素

javascript - 依赖一些大文件作为依赖是否有效?

javascript - 如何在 IntelliJ 的事件日志窗口中显示完整的 WebStorm 信息?

javascript - 在 jquery 中声明一个 if 语句来显示日期

css - 我怎样才能在这个 HTML/CSS 文件中移动这个框?

google-chrome - Chrome 18 dev 中的 CSS -webkit-radial-gradient closest-side 选项出现问题

javascript - 如何使用 python/scrapy 抓取网站上小部件的输出?

javascript - 是否可以将文本字段的值分配给单选按钮