javascript - 为什么我得到 NaN？

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 3 年前。

奥 git _a

我正在制作预算 Controller 应用程序，我从值输入中得到 NaN:

var budgetController = (function() {

})();

var UIController = (function() {

  var DOMstrings = {
    inputType: '.add__type',
    inputDescription: '.add__description',
    inputValue: '.add__value',
    inputBtn: '.add__btn'
  }

  return {
    getDOMstrings: function() {
      return DOMstrings;
    },
    getInput: {
      type: document.querySelector(DOMstrings.inputType).value,
      description: document.querySelector(DOMstrings.inputDescription).value,
      value: parseFloat(document.querySelector(DOMstrings.inputValue).value)
    }

  }

})();

var controller = (function(budgetCtrl, UICtrl) {

  var setupEventListeners = function() {
    var DOM = UICtrl.getDOMstrings();
    document.querySelector(DOM.inputBtn).addEventListener('click', addItem);
    document.addEventListener('keypress', function(event) {
      if (event.keyCode === 13 || event.which === 13) {
        addItem();
      }
    });
  }
  var addItem = function() {
    console.log(UIController.getInput)
  }

  return {
    init: function() {
      setupEventListeners();
    }
  }

})(budgetController, UIController);

controller.init();

我知道解决方案是通过函数覆盖 getInput 对象

getInput: function() {
  return {
    type: ...
      description: ...
      value: ...
  }
}

但是为什么我在值输入上得到 NaN 而在其他输入上却没有？还为什么我得到 NaN 而不是另一个错误？为什么这是一个错误，我的代码不是没有错误吗？

Answer 1

当文档加载时，您正在读取 document.querySelector(DOMstrings.inputType).value(此时该值可能是一个空字符串 - parseFloat("") 是 NaN)。

您需要在用户输入内容后读取输入的 value 属性。

例如当点击事件触发时