jQuery中的公式计算器

Question

我正在尝试完成一个计算器，该计算器根据输入计算值，反之亦然。

当我想计算PPM时，我需要MGM3和Mol
当我想计算MGM3时，我需要PPM和摩尔

现在，问题是它无法正常工作。我对这种计算还是陌生的。我希望有人可以帮助我解决这个问题。

以上固定
更新：只有在火狐中，在点后面使用 3 个数字时才会出错。例如，填写：
• 摩尔：30
• 毫克/米3： 0,15
完成后用几个数字补充mg/m3，结果无效。我该如何解决这个问题？

// formula for ppm =    mg/m3 * 24.45 / mol
// formula for mg/m3 =  ppm * mol / 24.45
 
 
 $('input.value').keyup(function(){
    var ppm = $('#ppm');
    var mgm3 = $('#mgm3');
    var mol = $('#mol');
    if( $('#ppm').val() != '') {
        $('#mgm3').attr('disabled', true);
        $(this).calculateMGM3;
    } else {
        $('#mgm3').attr('disabled', false);
    }
    if( $('#mgm3').val() != '') {
        $('#ppm').attr('disabled', true);
        $(this).calculatePPM; 
    } else {
        $('#ppm').attr('disabled', false);
    }
    function calculateMGM3() {
        var mol = $('#mol').val();
        var ppm = $('#ppm').val();
        var calcMGM3 = (( ppm * mol ) / 24.45 );
        $mgm3.val( calcMGM3 );
    }
    function calculatePPM() {
        var mol = $('#mol').val();
        var mgm3 = $('#mgm3').val();
        var calcPPM = (( mgm3 * 24.45 ) / mol );
        $ppm.val( calcPPM );
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calc">
    <h1>MG/M³ - PPM Calculator</h1>
    <div class="gfield">
        <label>PPM</label>
        <input class="value" type="number" name="ppm" id="ppm">
    </div>
    <div class="gfield">
        <label>MG/M³</label>
        <input class="value" type="number" name="mgm3" id="mgm3">
    </div>
    <div class="gfield">
        <label>Molmassa</label>
        <input class="value" type="number" name="mol" id="mol">
    </div>
</form>

Answer 1

我修复了代码中的一些错误

• calculateXX函数在事件处理程序内部 - 不需要，移到外面
• 调用方法时，您需要括号，因此$(this).calculatePPM更改为简单的calculatePPM()(不知道为什么前面有$(this)。
• 添加了从文本字段中读取数值的位置parseFloat。
• 您使用的是像 $ppm 这样的别名变量，但这些变量没有在任何地方声明。实际上，最好不要继续使用 jQuery 选择器，并在变量中缓存对字段的引用。但是为了保持最小的变化，我没有这样做。不过我建议你这样做。

// formula for ppm =    mg/m3 * 24.45 / mol
// formula for mg/m3 =  ppm * mol / 24.45
 
 
 $('input.value').keyup(function(){
    var ppm = $('#ppm');
    var mgm3 = $('#mgm3');
    var mol = $('#mol');
    if( $('#ppm').val() != '') {
        $('#mgm3').attr('disabled', true);
        calculateMGM3();
    } else {
        $('#mgm3').attr('disabled', false);
    }
    if( $('#mgm3').val() != '') {
        $('#ppm').attr('disabled', true);
        calculatePPM(); 
    } else {
        $('#ppm').attr('disabled', false);
    }
});
function calculateMGM3() {
    var mol = parseFloat($('#mol').val());
    var ppm = parseFloat($('#ppm').val());
    var calcMGM3 = (( ppm * mol ) / 24.45 );
    $('#mgm3').val( calcMGM3 );
}
function calculatePPM() {
    var mol = parseFloat($('#mol').val());
    var mgm3 = parseFloat($('#mgm3').val());
    var calcPPM = (( mgm3 * 24.45 ) / mol );
    $('#ppm').val( calcPPM );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calc">
    <h1>MG/M³ - PPM Calculator</h1>
    <div class="gfield">
        <label>PPM</label>
        <input class="value" type="number" name="ppm" id="ppm">
    </div>
    <div class="gfield">
        <label>MG/M³</label>
        <input class="value" type="number" name="mgm3" id="mgm3">
    </div>
    <div class="gfield">
        <label>Molmassa</label>
        <input class="value" type="number" name="mol" id="mol">
    </div>
</form>

Answer 2

可能不是最有效的方法，但这就是我完成的。现在它似乎像魅力一样工作。

jQuery(document).ready(function($) {
    $('input#ppm').keyup(function(){
        if( $('#ppm').val() != '') {
            $('#mgm3').attr('disabled', true);
            calculateMGM3();
        } else {
            $('#mgm3').attr('disabled', false);
        }
    });
    $('input#mgm3').keyup(function(){
        if( $('#mgm3').val() != '') {
            $('#ppm').attr('disabled', true);
            calculatePPM(); 
        } else {
            $('#ppm').attr('disabled', false);
        }
    });
    $('input#mol').keyup(function(){
        if( $('#mgm3').prop('disabled') ) {
            calculateMGM3();
        }
        if( $('#ppm').prop('disabled') ) {
            calculatePPM();
        }   
    });
    function calculateMGM3() {
        var mol = parseFloat($('#mol').val());
        var ppm = parseFloat($('#ppm').val());
        var calcMGM3 = parseFloat(( ppm * mol ) / 24.45 ).toFixed(2);
        $('#mgm3').val( calcMGM3 );
    }
    function calculatePPM() {
        var mol = parseFloat($('#mol').val());
        var mgm3 = parseFloat($('#mgm3').val());
        var calcPPM = parseFloat(( mgm3 * 24.45 ) / mol ).toFixed(2);
        $('#ppm').val( calcPPM );
    }
});