Почему не выводиться текущее значения поля input в consol?

Question

[Дмитрий Ярощук]

Проблема заключается в том что не выводиться текущие значение inputa в console.log. При этом class FormElement никак видоизменять нельзя
Вывод в консоль:

function getInfo(event) {
    event.preventDefault();
    console.log('Value-Name: ', elName.getValue());
    console.log('Value-Mail: ', elMail.getValue());
    console.log('Value-Password: ', elPassword.getValue());
    console.log('Value-PasswordRepeat: ', elPasswordRepeat.getValue());
    console.log('Value-Checkbox: ', elCheckbox.getValue());
    console.log('Value-Button: ', elButton.getValue());
}

Весь код :

class FormElement {
    constructor(name, type, value) {
        this.name = name;
        this.type = type;
        this.value = value;
    }
    showName() {
        console.log(`Name: ${this.name}`);
    }
    getValue() {
        return this.value;
    }
}
class TextElement extends FormElement {
    constructor(name, type, value, params) {
        super(name, type, value);
        const { classInput, parentWrapper, parent } = params;
        this.classInput = classInput;
        this.parentWrapper = parentWrapper;
        this.parent = parent;
    }
    createField(placeholder) {
        const newElement = document.createElement('label');
        newElement.classList.add(`form__label`);
        newElement.innerHTML = `<input class='form__input ${this.classInput}' placeholder="${placeholder}" name="${this.name}"type="${this.type}" value="${this.value}" required>`
        this.parentWrapper.append(newElement);
        return this.parent.append(this.parentWrapper);
    }
}
const elName = new TextElement('name', 'text', '',{
    classInput: 'js--input-name',
    parentWrapper: document.querySelector('.js--form_container'),
    parent: document.querySelector('.js--form'),
});
elName.createField('Введите пожалуйста свое имя');

const elMail = new TextElement('email', 'email', '', {
    classInput: 'js--input-email',
    parentWrapper: document.querySelector('.js--form_container'),
    parent: document.querySelector('.js--form'),
});
elMail.createField('Введите пожалуйста ваш электронный адрес');

const elPassword = new TextElement('password', 'password', '', {
    classInput: 'js--input-password',
    parentWrapper: document.querySelector('.js--form_container'),
    parent: document.querySelector('.js--form'),
});
elPassword.createField('Введите пожалуйста пароль');


const elPasswordRepeat = new TextElement('password-repeat', 'password', '', {
    classInput: 'js--input-password',
    parentWrapper: document.querySelector('.js--form_container'),
    parent: document.querySelector('.js--form'),
});
elPasswordRepeat.createField('Введите пожалуйста повторно пароль');



class CheckboxElement extends FormElement {
    constructor(name, type, value, params) {
        super(name, type, value);
        const { classLabel, classInput, parentWrapper, parent } = params;
        this.classLabel = classLabel;
        this.classInput = classInput;
        this.parentWrapper = parentWrapper;
        this.parent = parent;
    }
    createField(check) {
        const newElement = document.createElement('label');
        newElement.classList.add(`form__label`);
        newElement.classList.add(`${this.classLabel}`);
        newElement.innerHTML = `<input class='form__input form__input-checkbox ${this.classInput}' name="${this.name}" type="${this.type}" value="${this.value}" ${check} required>`+
                            `<p class="form__text">I agree all statements in <a class="form__link" href="#">Terms of service</a></p>`;
        this.parentWrapper.append(newElement);
        return this.parent.append(this.parentWrapper);

    }

}
const elCheckbox = new CheckboxElement('checkbox', 'checkbox', 'agreement', {
    classLabel: 'form__label-checkbox',
    classInput: 'js--input-password',
    parentWrapper: document.querySelector('.js--form_container'),
    parent: document.querySelector('.js--form'),
})
elCheckbox.createField(false);




class ButtonElement extends FormElement {
    constructor(name, type, value, params) {
        super(name, type, value);
        const { parentWrapper, parent } = params;
        this.parentWrapper = parentWrapper;
        this.parent = parent;
    }
    createField() {
        const newElement = document.createElement('button');
        newElement.classList.add('form__button');
        newElement.classList.add('js--form__button');
        newElement.setAttribute('name',this.name);
        newElement.setAttribute('type', this.type);
        newElement.setAttribute('value', this.value);
        newElement.textContent = 'Register';
        this.parentWrapper.append(newElement);
        this.parent.append(this.parentWrapper);
        return newElement.addEventListener('click', getInfo)
    }
}
const elButton = new ButtonElement('button', 'submit', 'submit',{
    parentWrapper: document.querySelector('.js--form_container'),
    parent: document.querySelector('.js--form'),
});
elButton.createField();
function getInfo(event) {
    event.preventDefault();
    console.log('Value-Name: ', elName.getValue());
    console.log('Value-Mail: ', elMail.getValue());
    console.log('Value-Password: ', elPassword.getValue());
    console.log('Value-PasswordRepeat: ', elPasswordRepeat.getValue());
    console.log('Value-Checkbox: ', elCheckbox.getValue());
    console.log('Value-Button: ', elButton.getValue());
}

<form class="form js--form" >
        <div class="form__container js--form_container"></div>
    </form>

Comments

[scottparker]

а почему там должно что-то выводится? если создан объект с пустым полем value. и нигде не меняется, с чего бы там выводилось что-то кроме пустой строки?

и делать так через глобальные переменные
так себе история вроде