Вызовите JS класс по нажатию кнопки и добавьте контент в DOM - PullRequest
Новая
       3

Вызовите JS класс по нажатию кнопки и добавьте контент в DOM

2 голосов
/ 03 февраля 2020

Я создал форму, где предполагается, что пользователи вводят имя, и когда они нажимают кнопку, кнопка вызывает функцию, которая создает новый объект на основе класса User, а функция вызывает метод render. Этот метод добавит новые пользовательские данные в DOM. Когда я console.log все выглядит нормально, но когда я пытаюсь добавить в DOM, новый div появляется и исчезает сразу. Это мой код: 

<div id="users"></div>
  <form>
    <input type="text" name="fName" id="name" placeholder="fName">
    <input type="text" name="email" id="email" placeholder="email">
    <button>submit</button>
  </form>

function submitForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const user = new User(name,email);
    user.render();
}

class User {
    constructor(name, email){
        this.name = name;
        this.email = email;
    }

    render(){
        const renderHookId = document.getElementById('users');

        const newUser = document.createElement('div');
        newUser.innerHTML = `<h3>${this.name}</h3>
                            <p>${this.email}</p>`;

        renderHookId.append(newUser);
        console.log(this.name, this.email);
    }
}

const btn = document.querySelector('button');
btn.addEventListener('click', submitForm);

Есть предложения, почему он не добавляется в DOM?

1 Ответ

1 голос
/ 03 февраля 2020

Вы на самом деле очень близки к рабочему коду! Все, что вам нужно сделать, это обязательно отменить событие по умолчанию при отправке, чтобы предотвратить публикацию данных и обновление страницы. Смотри ниже. 

function submitForm(e) {
    e.preventDefault();
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const user = new User(name,email);
    user.render();
}

class User {
    constructor(name, email){
        this.name = name;
        this.email = email;
    }

    render(){
        const renderHookId = document.getElementById('users');

        const newUser = document.createElement('div');
        newUser.innerHTML = `<h3>${this.name}</h3>
                            <p>${this.email}</p>`;

        renderHookId.append(newUser);
        console.log(this.name, this.email);
    }
}

const btn = document.querySelector('button');
btn.addEventListener('click', submitForm);
<div id="users"></div>
<form>
  <input type="text" name="fName" id="name" placeholder="fName">
  <input type="text" name="email" id="email" placeholder="email">
  <button>submit</button>
</form>
...