如何使用JS在表单中执行相互依赖的计算?

时间:2013-07-15 16:56:14

标签: javascript html jquery-mobile

我是JavaScript / jQuery的初学者,我正在使用jQuery Mobile设计我的第一个应用程序。

它是用于光谱计算的基本计算器。

我有3个字段:您在第一个和第二个字段中输入值,我计算出第三个字段中显示的数字。我使用keyup函数进行实时计算。

我要添加的功能是在执行计算后出现在第三个字段中,您可以修改第三个字段以查看第二个字段更改(它将执行反向计算。第一个字段将保持不变)

在JavaScript中执行此操作的最佳方法是什么?在我的例子中,我执行了反向计算,但不知道如何显示它。

HTML

<div data-role="content" class="page11" >
    <div data-role="fieldcontain">
        <label for="l0">Excitation</label>
        <input type="text" name="l0" id="l0" data-clear-btn="true" value="">
        <label for="l1">Signal</label>
        <input type="text" name="l1" id="l1" data-clear-btn="true" value="">
        <label for="l2">Shift</label>
        <input type="text" name="l2" id="l2" data-clear-btn="true" value="">    
    </div>

的Javascript

$('input').keyup(function () {

var l0 = parseFloat($('#l0').val()) || 0;
var l1 = parseFloat($('#l1').val()) || 0;
var dw1 = (l0 * l1)/2 || 0;
var dw = dw1.toFixed(2);
document.getElementById("l2").value = dw;

/* Inverse calculation */

var dw2 = parseFloat($('#l3').val()) || 0;
var l1_22 = 2 * dw2 / l0;
var l1_2 = l1_22.toFixed(2);


});

谢谢

1 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/6RrVG/

我鞭打了这个:

HTML

<p>F: <input type="text" name="f" value="50.0" /></p>
<p>=</p>
<p>m: <input type="text" name="m" /></p>
<p>&times;</p>
<p>a: <input type="text" name="a"  /></p>

jQuery的:

var $f = $('input[name=f]');
var $m = $('input[name=m]');
var $a = $('input[name=a]');
$m.on('keyup',function() {
    var f = +$f.val();
    var m = +$m.val();
    $a.val(f/m).toFixed(1);
});
$a.on('keyup',function() {
    var f = +$f.val();
    var a = +$a.val();
    $m.val(f/a).toFixed(1);
});

将键盘处理程序附加到输入并执行特定于每个输入的计算。