Question

我正在制作预算控制器应用程序，我从输入的值中获得了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

您的问题是getInput在执行IIFE的那一刻而不是在需要该值的那一刻被填充。

最简单的解决方法是将getInput替换为函数，该函数返回所需的对象：

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

Answer 2

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

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

例如点击事件触发时

Answer 3

检查parseFloat（）的输入。 99％这不是一个可解析的输入。如果我必须打赌，这就是你的错误。您仍然可以自己在调试器中打开代码来检查这种情况。

为什么我得到NaN？

3 个答案: