Как можно оперативно получить расчет площади?

Question

[Виктор Янышев]

В калькуляторе расчета стоимости изделия есть раздел детали, для расчета стоимости детали необходимо знать высоту, ширину, кол-во для расчета площади.
Сам калькулятор для наглядности: https://yadi.sk/i/gYhVXySg3Gkq8n

Подскажите как можно реализовать расчет площади и вставку числа площади в нужный инпут. При условии что пользователь ввел сначала длинну и следом высоту (при первом же вводе числа) показывает какова площадь изделия в кол-во 1 по умолчанию, площадь также сразу изменяется если изменять данные для расчета после первичного ввода.

Пока в голову приходит каждую строку повесить обработчик на клик и на target вешать input event, после чего возвращать значение записывая его в объект. После чего брать данные из объекта и рассчитывать, причем нужны обработчики для ситуаций когда изменили длину, высоту кол-во. Что-то это в кашу превращается.

Answer 1

[Ди Ма]

На все инпуты вешается слушатель "change" события, и в обработчике пишем, что если переменные "длина", "ширина", "количество" определены, то высчитываем площадь.
Тогда при изменении значения любого инпута будет происходить перерасчет.

var data = {num: 1};

$('#wid, #len, #num').on('change', function (e) {

	data[e.target.id] = e.target.value;  // имена свойств объекта совпадают с айдишниками инпутов  для простоты

	if (data.wid && data.len && data.num) {
		$('.res').html(data.wid * data.len * data.num);
	}
});

<input type="text" id="wid">
<input type="text" id="len">
<input type="text" id="num" value="1">

<div class="res"></div>