Question

我正在开发一个用于计算预算的小型APP，但遇到了我不了解的问题。我使用了一个构造函数来在几个输入字段中获取用户输入。

我试图在构造函数中设置此部分，以了解有关原型和构造函数的更多信息并挑战自己。我不明白为什么构造器GetInput没有保存我的input.values

// VARS:
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;
}


// EVENTLISTENERS
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); // NOT WORKING HERE
  }
});

控制台给了我

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

即使我当然在输入字段中输入了某些内容。当我仅使用控制台执行

时，此方法有效

document.querySelector('add__value').value;

这给了我期望的值，但不适用于构造函数

构造函数未保存querySelector（x）.value

0 个答案: