Search code examples
javascriptjqueryrefactoringdry

Refactor Two JS Functions That Share Same Variables


What would be the best way to refactor the following two functions that include very similar variable declarations:

function minFeeCheck(input) {
    input.value = parseFloat(input.value).toFixed(2);
    var minFeeUpdate = parseFloat($("#minimumFee").val()).toFixed(2);
    var maxFeeUpdate = parseFloat($("#maximumFee").val()).toFixed(2);
    var minInt = parseInt(minFeeUpdate);
    var maxInt = parseInt(maxFeeUpdate);
       if (minFeeUpdate < 0) input.value = 0;
       if (minInt > maxInt) input.value = maxFeeUpdate;
       if (minInt > maxInt) {
           input.value = minFeeUpdate;
           $("#maximumFee").val(minFeeUpdate);
       }
}
function maxFeeCheck(input) {
    input.value = parseFloat(input.value).toFixed(2);
    var minFeeUpdate = parseFloat($("#minimumFee").val()).toFixed(2);
    var maxFeeUpdate = parseFloat($("#maximumFee").val()).toFixed(2);
    var minInt = parseInt(minFeeUpdate);
    var maxInt = parseInt(maxFeeUpdate);
       if (maxFeeUpdate < 0) input.value = 0;
       if (maxInt < minInt) {
           input.value = maxFeeUpdate;
           $("#minimumFee").val(maxFeeUpdate);
       }
}

Both functions seem to be similar except one target a minimum and one targets a maximum. What would be the most ideal and cleanest method of writing this out while maintaining the same functionality. Thanks.

UPDATE

With the help of @gaetanoM, here is a possible solution. It includes a check if the user enters a negative number (which would change the minFee and maxFee as a zero).

HTML:

<input id="minFee" class="form-control form-control-custom" value="" maxlength="255" onchange="minMaxFeeCheck(this);" min="0" max="200" data-toggle="tooltip" title="A number greater than zero and less than maximum fee." type="number"/>

<input id="maxFee" class="form-control form-control-custom" value="" maxlength="255" onchange="minMaxFeeCheck(this);" min="0" max="200" data-toggle="tooltip" title="A number greater than zero and minimum fee." type="number"/>

JavaScript:

function minMaxFeeCheck(input, minormax) {
    input.value = parseFloat(input.value).toFixed(2);
    var minFeeUpdate = parseFloat($("#minimumFee").val()).toFixed(2);
    var maxFeeUpdate = parseFloat($("#maximumFee").val()).toFixed(2);
    var minInt = parseInt(minFeeUpdate);
    var maxInt = parseInt(maxFeeUpdate);
    var tmp = (minormax) ? minFeeUpdate : maxFeeUpdate;
    if (input.value < 0) {
          input.value = 0;
          $("#minimumFee").val(0);
    } else {
        if (tmp < 0) input.value = 0;
        if (minInt > maxInt) input.value = tmp;
        if (minInt > maxInt) {
            input.value = tmp;
            $("#minimumFee").val(tmp);
        }   
    }
}

Solution

  • My proposal is:

    function minmaxFeeCheck(input, minormax) {
        input.value = parseFloat(input.value).toFixed(2);
        var minFeeUpdate = parseFloat($("#minimumFee").val()).toFixed(2);
        var maxFeeUpdate = parseFloat($("#maximumFee").val()).toFixed(2);
        var minInt = parseInt(minFeeUpdate);
        var maxInt = parseInt(maxFeeUpdate);
    
        var tmp = (minormax) ? minFeeUpdate : maxFeeUpdate;
    
        if (tmp < 0) input.value = 0;
        if (minInt > maxInt) input.value = tmp;
        if (minInt > maxInt) {
            input.value = tmp;
            $("#minimumFee").val(tmp);
        }
    }
    

    Indeed:

    if (minInt > maxInt) {
    

    is the same of:

    if (maxInt < minInt) {