Блог

Главная - Вопросы по программированию - Как я могу получить информацию о пользователе, а затем сохранить ее в объекте?

Как я могу получить информацию о пользователе, а затем сохранить ее в объекте?

#javascript #html #forms

Вопрос:

Я сделал форму, чтобы узнать имя и фамилию пользователя. Когда они отправят форму, она сохранит информацию в объекте

 document.getElementById('sub').addEventListener('click', () => {
  let name = document.getElementById('name').value;
  let lastName = document.getElementById('lastName').value;
  let user = {
    name: name,
    lastName: lastName
  }
  let sayHello = document.getElementById('sayHello');
  sayHello.innerHTML = "hello "   user.name   " "   user.lastName   " how are you?"
}) 
 <div>
  <form>
    <label> name : </label>
    <input type="text" id="name"> <br>
    <label> last name : </label>
    <input type="text" id="lastName"> <br>
    <button id="sub">save</button>
  </form>
</div>
<span id="sayHello">hi</span>

Как я могу это исправить?

Ответ №1:

Ваша кнопка пытается отправить форму, что приводит к обновлению страницы.

Вы можете предотвратить это, вызвав preventDefault() событие click:

 document.getElementById('sub').addEventListener('click', (e) => {
  e.preventDefault();
  let name = document.getElementById('name').value;
  let lastName = document.getElementById('lastName').value;

  let user = {
    name: name,
    lastName: lastName
  }

  let sayHello = document.getElementById('sayHello');
  sayHello.innerHTML = "hello "   user.name   " "   user.lastName   " how are you?"

}) 
 <div>
  <form>
    <label> name : </label>
    <input type="text" id="name"> <br>
    <label> last name : </label>
    <input type="text" id="lastName"> <br>
    <button id="sub">save</button>
  </form>
</div>

<span id="sayHello">hi</span>
Метки: ,