Функция конструктора не сохранила querySelector (x) .value

Question

Я работаю над небольшим приложением для расчета бюджетов и застрял в проблеме, которую не понимаю. Я использовал конструктор для получения пользовательских входных данных в нескольких полях ввода.

Я попытался настроить эту часть в конструкторе, чтобы узнать больше о прототипировании и функциях конструктора, а также испытать себя. Я не понимаю, почему конструктор GetInput не держит мои input.values ​​

    <div class="add">
      <div class="add__container">
        <select class="add__type">
          <option value="inc" selected>+</option>
          <option value="exp">-</option>
        </select>
        <input type="text" class="add__description" placeholder="Add description">
        <input type="number" class="add__value" placeholder="Value">
        <button class="add__btn"><i class="ion-ios-checkmark-outline"></i></button>
      </div>
    </div>

const addType = document.querySelector('.add__type').value;
const description = document.querySelector('.add__description').value
const addValue = document.querySelector('.add__value').value;

// EVENTLISTENER Constructor:
function EventListner(selector, listner, fnt) {
  this.selector = selector;
  this.listner = listner;
  this.fnt = fnt;
  document.querySelector(selector).addEventListener(listner, fnt);
};

function GetInput(operator, description, value) {
  this.operator = operator;
  this.description = description;
  this.value = value;
}

const inputData = new GetInput(addType, description, addValue);
console.log(inputData);

const clickListener = new EventListner('.add__btn', 'click', () => {
  if (description.value == '' || addValue.value == '') {
    // MAKE SURE DESCRIPTION AND VALUE IS NOT EMPTY
    alert('description and value can\'t be empty');
    return;
  }
  const inputData = new GetInput(addType, description, addValue);
  console.log(inputData);
});

const enterKeyListener = new EventListner('.add__value', 'keypress', (e) => {
  if (e.keyCode == 13) {
    if (description.value == '' || addValue.value == '') {
      // MAKE SURE DESCRIPTION AND VALUE IS NOT EMPTY
      alert('description and value can\'t be empty');
      return;
    }
    // ON ENTER SAVE VALUES IN AN ARRAY
    // IF PLUS INTO incomeArr, ON MINUS INTO expenseArr
    console.log('enter pressed');
    const inputData = new GetInput(addType, description, addValue);
    console.log(inputData);
  }
});

Вывод:

GetInput {operator: "inc", description: "", value: ""}

Работает только тогда, когда я:

document.querySelector('.add__value').value;

прямо в консоль.

Answer 1

Ваши начальные значения пусты для полей ввода. И ваш код выполняется сразу же. Вот почему вы получаете пустое значение для этих полей. Вы можете попробовать добавить некоторые предопределенные значения для этих полей ввода.

Код с предопределенным значением для полей ввода:

const addType = document.querySelector('.add__type').value;
const description = document.querySelector('.add__description').value
const addValue = document.querySelector('.add__value').value;


function GetInput(operator, description, value) {
  this.operator = operator;
  this.description = description;
  this.value = value;
}

const inputData = new GetInput(addType, description, addValue);
console.log(inputData);

    <div class="add">
      <div class="add__container">
        <select class="add__type">
          <option value="inc" selected>+</option>
          <option value="exp">-</option>
        </select>
        <input type="text" value="mydesc" class="add__description" placeholder="Add description">
        <input type="number" value="2" class="add__value" placeholder="Value">
        <button class="add__btn"><i class="ion-ios-checkmark-outline"></i></button>
      </div>
    </div>

Note : Вам необходимо добавить прослушиватель событий для прослушивания любых изменений в значениях вашего поля ввода. Если пользователь вводит что-либо, вы можете приступить к созданию экземпляра функции конструктора

Answer 2

Вы получаете эту проблему, потому что вам нужно вызвать событие для вычисления, и еще одна вещь, которую вы должны использовать что-то другое, кроме const, потому что вы не можете повторно инициализировать значение в константных переменных, текущий код выполняется на странице загрузки, Таким образом, значения инициализируются так, что они не изменятся

const addType = document.querySelector('.add__type').value;
const description = document.querySelector('.add__description').value
const addValue = document.querySelector('.add__value').value;

Поэтому, пожалуйста, измените const с помощью var или let, или вы можете установить значение по умолчанию для описания и значения