javascript - Using addEventListener with object literal -

i trying write js using parts described douglas crockford , therefore created single global object a. having trouble js code. variables value1 , value2 evaluating nan , don't understand why.

i have declared 2 variables invoiced , lastinvoiced outside of totalinvoiced , tried them inside method using this. however, don't know if correct? did in hope use addeventlistener on variables , call onchange event.

why value1 , value2 evalutaing nan?

how write code use 'addeventlistener' onchange event on 2 variables?

here jsfiddle link of code.

this js code:

var = {  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); 

firstly, parsefloat("invoiced1"); , parsefloat("lastinvoiced"); evaluating strings invoiced1, lastinvoiced - not variables - change that, so:

parsefloat(invoiced1); parsefloat(lastinvoiced); 

---

secondly, <input> elements attempting values don't have values set.

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

here, € value of <td>, not <input>. should give initial value - shouldn't need test nan in code if write properly, remove check.

---

thirdly, mentioned, you're setting events element's value, not element - try setting them elements themselves, , using a.invoiced.value; etc (use a instead of this this refer different objects in context, calling in different ways) instead grab value, e.g:

invoiced: document.getelementbyid("invoiced"), lastinvoiced: document.getelementbyid("lastinvoiced"), totalinvoiced: function () {     var invoiced = a.invoiced.value;     var lastinvoiced = a.lastinvoiced.value;      ... 

here's updated jsfiddle example