My problem is that the Hide function runs perfectly, but the Appear one does not. I have 2 panels: One for Sign Up and one for Register, i want that if the user clicks on the register button, then the login panel disappears and the register one appears at the same place, as login was.

I have the following code:

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>

3 Answers

1
ellipsis On

The syntax is

element.style.display=value

not

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

0
Sumit M On

A better way to achieve toggle functionality.

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>

0
jonathana On
  1. You cant get or set y.display.style you wanted y.style.display
    (display is a property of style and not the opposite).
  2. based on your code, you should do it more simple and maintainable, I would use one function - HandleView() that will check the state of the panels and will activate Hide() and Appear(). please see my suggestion.

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>