Как отслеживать нажатие нескольких кнопок в форме одновременно?

Question

[Иван]

У меня есть две формы, одна на логин, другая на регистрацию, как я могу без дубляжа кода отслеживать сразу несколько кликов для дальнейших действий?
На данный момент у меня такая логика:

// смена табов логина/регистрации

    const login = document.querySelector('.link-login');
    const register = document.querySelector('.link-register');
    const formContainer = document.querySelectorAll('.form-login__form-wrapper');

    login.addEventListener('click', (e) => {
        const active = document.querySelector('.form-login__header-link.active');
        e.preventDefault();
        if (login !== active) {
            login.classList.toggle('active');
            register.classList.toggle('active');


            formContainer[0].classList.toggle('none');
            formContainer[1].classList.toggle('none');
        }
    });

    register.addEventListener('click', (e) => {
        const active = document.querySelector('.form-login__header-link.active');
        e.preventDefault();
        if (register !== active) {
            register.classList.toggle('active');
            login.classList.toggle('active');

            formContainer[0].classList.toggle('none');
            formContainer[1].classList.toggle('none');
        }
    });

Но на мой взгялд это очень плохое решение, ведь если добавится ещё один таб или количество форм вырастет, то код будет дублироваться.
Я бы хотел отслеживать клик на табы логина и регистрации и в зависимости от того, на какой был клик - показывать ту форму. Я пытался решить вопрос через forEach, но я так понял он при запуске скрипта отрабатывает один раз и всё, так же мне кажется бесконечный цикл не вариант - систему повесит, что я могу сделать?

Answer 1

[Сергей Соколов]

Для «двухклавишного» выключателя можно предложить такой общий обработчик кликов:

const handler = (e) => {
  e.preventDefault();
  const active = document.querySelector('.form-login__header-link.active');
  const target = e.target;
  if (target === active) return;

  [register, login].forEach(el => el.classList.toggle('active'));
  [...formContainer].forEach( el => el.classList.toggle('none'));
}

login.addEventListener('click', handler);
register.addEventListener('click', handler);

e.target – кликнутый элемент.

Answer 2

[Алексей]

Создайте класс табы - будете использовать везде, не только в этой ситуации.

Обработчики кликов добавляйте не кнопкам переключения, а их обертке. Затем по всплытию события смотрите что нажато, если нужная кнопка, то функция выполняется дальше, если нет, то функция прерывается. У каждый кнопки должно быть значение указывающее, на то, какой таб она открывает

Comments

[Иван]

Алексей я не до конца понял следующее

У каждый кнопки должно быть значение указывающее, на то, какой таб она открывает

, это о каком идёт значении? нормальный нейминг класса у кнопки?

[Алексей]

Иван,

Например структура такая

.wrap-button
  .button(data-value="1")
  .button(data-value="2")
.wrap-tabs
  .tab(data-tab="1")
  .tab(data-tab="2")

В зависимости от data-value нажатой кнопки мы показываем tab с соответствующим значением data-tab

[Иван]

Алексей, а понял. я просто через querySelector нахожу кнопки, тут получается через data-set?

[Алексей]

Например

const wrapBtn = document.querySelector('.wrap-button');
wrapBtn.addEventListenner('click', () => {
  const btn = event.target.closest('[data-value]');
  if ( !btn) return;

  const tabValue = btn.dataset.value;
  ... код далее
});