Открытие/закрытие кнопок при наследовании в JavaScript

Question

Есть 2 кнопки в одном элементе. Нужно, чтобы при нажатии на кнопку появлялась форма. А потом при нажатии на отправить, закрывалась.

<div class="info">
    <button>Заявка</button>
    <button>Резюме</button>
</div>
<div class="form">
    <form action="" method="POST">
        <fieldset>
            <input type="text" name="full_name" placeholder="ФИО" required>
            <input type="number" name="phone" placeholder="Телефон" required>
            <input class="button" type="submit">
        </fieldset>
    </form>
</div>

let buttons = document.querySelector('.info');

buttons.addEventListener('click', openWindow);

function openWindow() {
    if (buttons.style.display = 'none') {
        buttons.style.display = 'block'
    } else {
        buttons.style.display = 'none'
    }
}

Answer 1

Если я правильно понял, то при нажатии на любую из двух кнопок форма должна появляться, а при нажатии на Отправить - скрываться:

html:

<div class="info">
    <button>Заявка</button>
    <button>Резюме</button>
</div>
<div hidden="true" class="form">
  <form action="" method="POST">
    <fieldset>
      <input id="fullName" type="text" name="full_name" placeholder="ФИО" required>
      <input id="number" type="number" name="phone" placeholder="Телефон" required>
      <input id="sendButton" class="button" type="submit">
    </fieldset>
  </form>
</div>

js:

let buttons = document.querySelectorAll('button');
let form = document.querySelector('.form');

buttons.forEach( b => b.addEventListener('click', openWindow) );
function openWindow() {
    form.style.display = 'inline';
}

let sendButton = document.querySelector('#sendButton');
sendButton.addEventListener('click', () => { 
  // Получаем поля ввода
  let inputFullName = document.querySelector('#fullName');
  let inputNumber = document.querySelector('#number');
  
  if (!inputFullName || !inputNumber)
    return;
    
  // Проверяем заполнены ли они
  if (inputFullName.value && inputNumber.value) {
        // если да, то закрываем форму
        form.style.display = 'none';
  }
});

БЛОГ НА HUSL

Открытие/закрытие кнопок при наследовании в JavaScript

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