JQuery Calculator

Question

Я пытаюсь построить калькулятор HTML/Jquery, где пользователь вводит значение в текстовое поле «Среднее значение единицы продукта», а затем другое значение в «Общий объем продаж единицы товара».

После ввода значений мне нужно, чтобы эти значения умножались друг на друга, чтобы генерировать значение «Общая сумма продаж», но нет кнопки отправки - подумайте, как только пользователь нажимает за пределами текстового поля, которое когда расчет должен произойти.

Если кнопка отправить СУСЛО то я рад, но текущее требование не иметь.

Я не знаю, с чего начать писать логику, чтобы иметь возможность сделать это. Я начинаю, когда дело доходит до JQuery, поскольку я все еще его изучаю.

здесь код, чтобы помочь

Все предложения приветствуются - надеются, что изображение помогает

ДЖОРДИ

Answer 1

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

EDIT: Обновлен для использования вашего HTML.

Working example available

$(document).ready(function() 
{ 
    $('input').change(function() 
    { 
     var answer = parseInt($('#product-unit-val').val()) * parseInt($('#total-unit-sales').val()) * parseInt($('#number-reps').val()); 
     $('#sales-val').html('$' + answer); 
    }); 
}); 

Answer 2

Как насчет использования метода .Кнопки JQuery в?

$(".input").change(function(){ 
//check if both have data 
//do the calculation 
//save the value 
}); 

В любом время изменения входного поля, это событие будет срабатывать

Answer 3

Просто приложите onChange к каждому из текстовых полей, что вызывает вашу функцию, которая извлекает и умножает значения и обновляет общее. Функция должна отображать неправильный ввод.

Answer 4

Я бы добавил обработчик события onkeyup и onblur в различные текстовые поля. В этих случаях вызовите свою функцию, которая выполняет простую математику, и выводит значение в окончательное текстовое поле. Убедитесь, что вы заботитесь, чтобы заботиться о плохом входе, который приведет к выходу NaN

Answer 5

Если это HTML:

Average product unit value <input type="text" id="product-unit-val" /><br/> 
Total unit sales value <input type="text" id="total-unit-sales" /><br/> 
Number of reps <input type="text" id="number-reps" /><br/> 
Total sales value <span id="sales-val"></span>$ 

Это JQuery, что делает волшебство:

$(function() { 
    $('#product-unit-val, #total-unit-sales, #number-reps').change(function() { 
    var total = parseInt($("#product-unit-val").val()) * parseInt($("#total-unit-sales").val()) * parseInt($("#number-reps").val()); 
    if (!isNaN(total)) { 
     $("#sales-val").html(total); 
    } 
    }); 
}); 

Первая строка выполняет код только после инициализации. Вторая строка:

$('#product-unit-val, #total-unit-sales, #number-reps').change(function() { 

говорит, что следующая функция будет выполнена, если что-то изменится. Следующая строка - это операция: parseInt не является абсолютно необходимым, но иногда это полезно (используйте parseFloat, если ваши значения являются float). Линии типа $ ("# ID"). Val() говорит: дайте мне значение этого элемента ID. Я добавил тест NaN (не число), чтобы избежать плохих результатов, когда не все значения установлены.

Обратите внимание, что ваш калькулятор отвечает каждый раз, когда пользователь изменяет поле ввода, пользователю нужно сделать щелчок вне ввода. Если вы хотите, чтобы ваш калькулятор работает на каждом изменении ключа строки:

$('#product-unit-val, #total-unit-sales, #number-reps').change(function() { 

по

$('#product-unit-val, #total-unit-sales, #number-reps').keyup(function() { 

Существует working demo here.