Question

我正在尝试使用Douglas Crockford描述的Good Parts编写我的JS，因此创建了一个单一的全局对象A。但是我的JS代码遇到问题。变量value1和value2正在评估NaN，我不明白为什么。

我已在invoiced之外声明了两个变量lastInvoiced和totalInvoiced，然后尝试使用this将它们放入方法中。但是，我不知道这是否正确？我这样做是希望我可以对这些变量使用addEventListener并调用onchange事件。

为什么value1和value2评估到NaN？

如何编写代码以在这两个变量上使用带有onchange事件的'addEventListener'？

Here is a jsFiddle link to all of my code.

这是我的JS代码：

var A = {

invoiced: document.getElementById("invoiced").value,   
lastInvoiced: document.getElementById("lastinvoiced").value,
totalInvoiced: function () {

 var invoiced1 = this.invoiced;
 var lastInvoiced1 = this.lastInvoiced;
 var value1 = parseFloat("invoiced1");
 var value2 = parseFloat("lastInvoiced1");

     if(isNaN(value1))
         value1 = 0;
     if(isNaN(value2))
         value2 = 0;

 var totalInvoiced1 = value1 + value2;
 var value3 = document.getElementById("daytotal").value = totalInvoiced1 + "€";
 return value3;   
 }

 };
window.onload = A.totalInvoiced();
A.invoiced.addEventListener("change", A.totalInvoiced, false);
A.lastInvoiced.addEventListener("change", A.totalInvoiced, false);

Answer 1

首先，parseFloat("invoiced1");和parseFloat("lastInvoiced");正在评估字符串 invoiced1，lastInvoiced - 而不是变量 - 更改它，所以：

parseFloat(invoiced1);
parseFloat(lastInvoiced);

其次，您尝试获取值的<input>元素实际上没有设置任何值。

  <td><input type="number" id="invoiced" class="boxed" />&euro;</td>

此处，€是<td>的值，而不是<input>。您应该给它一个初始值 - 如果您正确编写代码，则不需要在代码中测试NaN，因此请删除该检查。

第三，如上所述，您将事件设置为元素的值，而不是元素 - 尝试将它们设置为元素本身，然后使用A.invoiced.value;等（使用A代替{ {1}}因为this有时会引用您的上下文中的不同对象，因为您以不同的方式调用它，而不是抓取值，例如：

this

Here's an updated jsFiddle example

将addEventListener与对象文字一起使用

1 个答案: