將addEventListener與對象文字一起使用

Question

我試圖使用Douglas Crockford所描述的Good Parts編寫JS，因此創建了一個全局對象A 但是我在我的JS代碼方面遇到了麻煩。 變量value1和value2的計算結果為NaN ，我不明白為什么。

我已經宣布了兩個變量invoiced和lastInvoiced的外totalInvoiced ，然后試圖讓他們使用方法內部this 。 但是，我不知道這是否正確？ 我這樣做是希望可以在這些變量上使用addEventListener並調用onchange事件。

為什么value1和value2評估為NaN ？

我該如何編寫代碼來在這兩個變量的onchange事件上使用“ addEventListener”？

這是我所有代碼的jsFiddle鏈接。

這是我的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 ，而不是this因為this有時會引用不同的對象在你的情況下，當你以不同的方式調用它）而不是搶值，例如：

invoiced: document.getElementById("invoiced"),
lastInvoiced: document.getElementById("lastinvoiced"),
totalInvoiced: function () {
    var invoiced = A.invoiced.value;
    var lastInvoiced = A.lastInvoiced.value; 
    ...

這是一個更新的jsFiddle示例