Как корректно считать значение с поля input а не с атрибута value?

Рейтинг: 1Ответов: 1Опубликовано: 04.05.2023

Проблема заключается в том что когда я пытаюсь считать текущее значение поля input, то оно считывает его из атрибута value, а не из самого input. А нужно что считывало именно текущее значение из input и выводило его в консоль. Такое происходит с elName.getValue(), elMail.getValue(), elPassword.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('onclick', 'getInfo(event)')
        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>

Ответы

▲ 1Принят

У вас нет обработчиков изменения состояния элементов input

Можно сделать так:

В классе FormElement создаем метод createElement

createElement(placeholder, classes) {
  const el = document.createElement('input');
  el.type = this.type;
  el.value = this.value;
  el.name = this.name;
  classes?.forEach(cl => el.classList.add(cl))
  el.placeholder = placeholder;
  const self = this;
  el.oninput = function (e) {
    self.value = e.currentTarget.value;
  }
  return el;
}

Метод возвращает элемент input с установленным обработчиком события изменения данных

Метод createField меняем так:

createField(placeholder) {
  const newElement = document.createElement('label');
  newElement.classList.add(`form__label`);
  this.parent.append(this.createElement(placeholder, ['form__input', `${this.classInput}`]))
  return this.parent.append(this.parentWrapper);
}

Теперь при изменении данных в input, данные сохраняются в экземпляре класса в поле value

Полный код(checkBox не менялся):

  class FormElement {
    constructor(name, type, value) {
      this.name = name;
      this.type = type;
      this.value = value;
    }

    createElement(placeholder, classes) {
      const el = document.createElement('input');
      el.type = this.type;
      el.value = this.value;
      el.name = this.name;
      classes?.forEach(cl => el.classList.add(cl))
      el.placeholder = placeholder;
      const self = this;
      el.oninput = function (e) {
        self.value = e.currentTarget.value;
      }
      return el;
    }

    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`);
      this.parent.append(this.createElement(placeholder, ['form__input', `${this.classInput}`]))
      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('onclick', 'getInfo(event)')
      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>