Как на JS реализовать функцию переключения форм

Question

Есть 2 формы, нужно реализовать переключение между ними. Точнее чтобы при клике на Зарегистрироваться или Авторизоваться появлялась соответственно форма Регистрация или Вход. Мой вариант видимо не подходит, а другого я найти на просторах интернета так и не смогла. Помогите пожалуйста советами.


    'use strict'

    //Переменные
    //формы
    const form_a = document.querySelector('#form-entr');
    const form_b = document.querySelector('#form');

    //авторизация и регистрация
    const toformReg = document.querySelector('#form1');
    const toformEntr = document.querySelector('#form2');

    //переключение между окнами при нажатии на надпись "Зарегистрироваться"
function goToRegistration(){
  form_a.style.visibility = 'collapse';
  form_b.style.visibility = 'visible';
}
toformReg.addEventListener('click', goToRegistration);

//переключение между окнами при нажатии на надпись "Авторизоваться"
function goToEntrance(){
  form_b.style.visibility = 'collapse';
  form_a.style.visibility = 'visible';
}
toformEntr.addEventListener('click', goToEntrance);

    body {
      max-width: 1440px;
      max-height: 769px;
      background-color: #1B2473;
      display: flex;
      flex-direction: column;
      font-family: 'Roboto', sans-serif;
    }

    .form-a{
    width: 600px;
    height: fit-content;
    background: #FFFFFF;
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top:82px;
    display:flex;
    flex-direction:column;
    visibility: visible;
}



.form-b{
    width: 600px;
    height: fit-content;
    background: #FFFFFF;
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top:82px;
    display:flex;
    flex-direction:column;
    visibility: collapse;
}
    .form-a__registration,
    .form-b__registration {
      width: 137px;
      height: 16px;
      font-weight: 700;
      font-size: 14px;
      line-height: 16px;
      color: #1A226B;
      margin-left: 70%;
      margin-top: 10px;
    }

    .form-a__registration:hover {
      font-size: 14px;
      color: green;
    }

    .form-b__registration:hover {
      font-size: 14px;
      color: green;
    }

    <body>
      <!--Форма "Вход"-->

      <form class="form-a" id="form-entr">

        <p class="form-a__registration" id="form1">Зарегистрироваться</p>
      </form>

      <!--Форма "Регистрация"-->

      <form class="form-b" id="form">

        <p class="form-b__registration" id="form2">Авторизоваться</p>
      </form>
    </body>

Answer 1

Вместо назначения стилей через JS, лучше назначать классы. Так мы получим более гибкий подход и будет легче контролировать стили. Достаточно задать выбранной форме класс active, а стили для активной формы и ее дочерних элементов настраиваем через CSS.

function changeForm() {
  document.querySelector('.form.active').classList.remove('active');
  this.closest('.form').classList.add('active');
}

form1.onclick = form2.onclick = changeForm;

body {
  background-color: #1B2473;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
}

.form-wrap {
  width: 450px;
  margin: 82px auto 0 auto;
  position: relative;
}

.form-wrap * {
  box-sizing: border-box;
}

.form-wrap form {
  background: #fff;
  border-radius: 0 0 20px 20px;
  padding: 2em;
}

.form .tab {
  position: absolute;
  bottom: 100%;
  width: 50%;
  text-align: center;
  padding: 1em 0;
  cursor: pointer;
  color: #aaa;
}

.form.active .tab {
  border-radius: 20px 20px 0 0;
  background: white;
  color: black;
}

form {
  display: none;
  flex-direction: column;
  gap: 1em;
}

.form.active form { display: flex; }

#form1.active form { border-top-right-radius: 20px; }
#form2.active form { border-top-left-radius: 20px; }

#form1 .tab { left: 0; }
#form2 .tab { left: 50%; }

button {
  display: block;
  margin: 0 auto;
  padding: 0.5em 2em;
  margin-top: 1em;
}

input {
  width: 100%;
  padding: 5px;
}

label {
  display: block;
  margin-bottom: 0.4em;
}

<div class="form-wrap">

  <div class="form active" id="form1">
    <div class="tab">Авторизация</div>
    <form>
      <div class="field">
        <label for="login">Логин</label>
        <input type="text" id="login">
      </div>
      <div class="field">
        <label for="pass">Пароль</label>
        <input type="text" id="pass">
      </div>
      <button>Авторизоваться</button>
    </form>
  </div>

  <div class="form" id="form2">
    <div class="tab">Регистрация</div>
    <form>
      <div class="field">
        <label for="name">Имя</label>
        <input type="text" id="name">
      </div>
      <button>Зарегистрироваться</button>
    </form>
  </div>

</div>

Можно вынести табы отдельно, но я почему-то сделал так.

БЛОГ НА HUSL

Как на JS реализовать функцию переключения форм

Ответы (1 шт):