Исчезает данные из console.log

Создаю ивент на кнопке, что по нажатию она будет считывать данные из инпутов и выносить их в консоль. Но на деле данные появляются в консоле и тут же пропадают. Заметил что адрес ссылки меняет (перезагружается страница с новым адресом). Как можно такое пофиксить?

let btnRegister = document.querySelector('.submit-button');

const sendDataHandler = () => {
  let elemsInputEmail = document.querySelector('input[type=email]').value;
  let elemsInputName = document.querySelector('input[type=text]').value;
  let elemsInputPass = document.querySelector('input[type=password]').value;
  let res = [elemsInputEmail, elemsInputName, elemsInputPass];
  console.log(res);
};

btnRegister.addEventListener('click', sendDataHandler);
  <body>
    <main class="page">
      <form class="login-form">
        <h1 class="form-title">Create user</h1>
        <div class="form-control">
          <label class="form-label" for="email">Email</label>
          <input
            class="form-input"
            type="email"
            id="email"
            name="email"
            placeholder="[email protected]"
            required
          />
        </div>
        <div class="form-control">
          <label class="form-label" for="email">User name</label>
          <input class="form-input" type="text" name="name" required />
        </div>
        <div class="form-control">
          <label class="form-label" for="password">Password</label>
          <input class="form-input" type="password" name="password" required />
        </div>
        <button class="submit-button" type="submit">Register</button>
      </form>
    </main>

    <script src="index.js"></script>
  </body>


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

Автор решения: Алексей Шиманский

Проблема тут:

 <button class="submit-button" type="submit">Register</button>

Вы либо поставьте кнопке тип button, либо в методе делайте e.preventDefault().

А в целом, раз вы всё равно на js все значения из полей собираете, то зачем вам вообще form и кнопка submit?

→ Ссылка