Использование addEventListener с объектным литералом

Я пытаюсь написать свою JS, используя Good Parts, как описано Дугласом Крокфордом, и поэтому создал единый глобальный объект A Однако у меня возникают проблемы с кодом JS. Переменные value1 и value2 оценивают NaN и я не понимаю, почему.

Я объявил две переменные invoiced и lastInvoiced вне totalInvoiced, а затем попытался получить их внутри метода, используя this. Однако, я не знаю, правильно ли это? Я сделал это в надежде, что тогда я смогу использовать addEventListener для этих переменных и вызвать событие onchange.

Почему value1 и value2 evalutaing для NaN?

Как мне написать код для использования 'addEventListener' с событием onchange по этим двум переменным?

Вот ссылка 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);
1 ответ

Во-первых, parseFloat("invoiced1"); и parseFloat("lastInvoiced"); оценивающих строки invoiced1, lastInvoiced - не переменные - изменения, которые, таким образом:

parseFloat(invoiced1);
parseFloat(lastInvoiced);

Во-вторых, элементы которые вы пытаетесь получить из значений, фактически не имеют значений.

Здесь, это значение , а не . Вы должны дать ему начальное значение - вам не нужно тестировать NaN в коде, если вы его правильно напишете, поэтому удалите эту проверку.

В-третьих, как уже упоминалось, вы устанавливаете события на значение элемента, а не на элемент - попробуйте установить их самим элементам, а затем с помощью A.invoiced.value; и т.д. (вместо this используйте A поскольку this иногда относится к различным объектам в вашем контексте, поскольку вы вызываете их разными способами) вместо этого, чтобы захватить значение, например:

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

Здесь обновленный пример jsFiddle

licensed under cc by-sa 3.0 with attribution.