将addEventListener与对象文字一起使用

Question

I am trying to write my JS using the Good Parts as described by Douglas Crockford and therefore created a single global object A . However I am having trouble with my JS code. The variables value1 and value2 are evaluating to NaN and I don't understand why.

I have declared the two variables invoiced and lastInvoiced outside of the totalInvoiced and then tried to get them inside the method using this . However, I don't know if this is correct? I did this in the hope that I could then use addEventListener on those variables and call the onchange event.

Why are value1 and value2 evalutaing to NaN ?

How would I write the code to use 'addEventListener' with the onchange event on those two variables?

Here is a jsFiddle link to all of my code.

This is my JS code:

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

Firstly, parseFloat("invoiced1"); and parseFloat("lastInvoiced"); are evaluating the strings invoiced1 , lastInvoiced - not the variables - change that, so:

parseFloat(invoiced1);
parseFloat(lastInvoiced);

---

Secondly, the <input> elements you are attempting to get the values from don't actually have any values set.

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

Here, € is the value of the <td> , not the <input> . You should give it an initial value - you shouldn't need to test for NaN in your code if you write it properly, so remove that check.

---

Thirdly, as mentioned, you're setting the events to the element's value, not the element - try setting them to the elements themselves, and then using A.invoiced.value; etc (use A instead of this as this will sometimes refer to different objects in your context, as you are calling it in different ways) instead to grab the value, eg:

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

Here's an updated jsFiddle example