Кнопка для открытия формы с Javascript не работает

Question

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

html:

<div class="open-btn">
  <button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
  <div class="modal_contents">
    <div class="modal_close-bar"><span>X</span></div>
    <form id="open-form">
      <input type="text" placeholder="Name">
      <input type="email" id="email" placeholder="Email">
      <input type="text" placeholder="Subject">
      <textarea placeholder="Message"></textarea>
      <button>Submit</button>
    </form>
  </div>
</div>

css:

.modal {
  background-color: rgb(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal_contents {
  background-color: #fff;
  padding: 2rem 4rem;
}
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.5rem;
}
.modal_close-bar {
  display: flex;
  justify-content: flex-end;
  margin-right: -2rem;
  margin-top: -1rem;
  cursor: pointer;
}
.button {
  width: 100%;
  padding: 0.5rem;
  background-color: rgba(234, 203, 193, 0.4);
  border: none;
  color: #fff;
  transition: all 0.3s ease;
}
.button:hover {
  background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
  display: none;
}

Javascript:

const toggleModal = () => {
 document.querySelector('.modal').classList.toggle('.modal--hidden');
};

document.querySelector('#show-modal').addEventListener('click', toggleModal);

document.querySelector('#open-form').addEventListener('submit', (event) => {
  event.preventDefault();
  toggleModal(); 
});

Answer 1

Единственная опечатка, которую вы допустили, была такая:

document.querySelector('.modal').classList.toggle('.modal--hidden');

Просто удалите точку перед 'modal - hidden', например:

document.querySelector('.modal').classList.toggle('modal--hidden');

Кроме того, чтобы получить Данные формы, сначала дайте имена всем вашим элементам формы:

    <form id="open-form">
        <input type="text" placeholder="Name" name="name">
        <input type="email" id="email" placeholder="Email" name="email">
        <input type="text" placeholder="Subject" name="subject">
        <textarea placeholder="Message" name="message"></textarea>
        <button>Submit</button>
    </form>

Затем, захватите данные формы, используя объект FormData:

document.querySelector('#open-form').addEventListener('submit', (event) => {
  event.preventDefault();
  toggleModal();
  var formData = new FormData(document.querySelector('#open-form'));
  console.log("Name:" + formData.get('name'),
    "Email:" + formData.get('email'),
    "Subject:" + formData.get('subject'),
    "Message:" + formData.get('message'));
});

Чтобы получить полный код, нажмите здесь

Answer 2

Просто удалите точку перед modal--hidden, и она заработает.

document.querySelector('.modal').classList.toggle('modal--hidden');