I calculate with Javascript

Question

I need some help from you.

I have two numeric fields in my system as shown in the photo below.

The field that has a red line around it, it will have to make a calculation about the top field, as you can see in the field Creatinine... this with a value of 2.3, the field in red would only accept that value of 2.3 + 0.3 in case it would be 2.6 up.

In short, the field in red would accept only the values of the top field plus 0.3, as an example would be 2.6 for more, could not accept values below that

I’ll post my code I tried to do here:

function formulaCreabas2() {
        var valueCreabas2 = $('[name="creabas2"]').val();
        var valueCrebas = $('[name="creabas"]').val();
    
        var subCreab = valueCrebas - valueCreabas2
        console.log(subCreab);
        if (subCreab < 0.2999999999999997) {
            $('#creabas2-msg').removeClass('display-none');
            $('#creabas2-msg').text('Não há como comprovar a informação. Dúvidas: entre em contato com a equipe do estudo.');
            $('[name = "creabas2"]').val('');
        } else {
            $('#creabas2-msg').addClass('display-none');
        }
    }

<div class="row">
                                <div class="form-group topo">
                                    <div class="col-md-4">
                                        <label>
                                            Creatinina (posterior à admissão hospitalar e a mais próxima da randomização): <span style="color:red;">*</span>
                                        </label>
                                    </div>
                                    <div class="col-md-3 target">
                                        <div style="width: 180px;" class="input-group">
                                            <input type="text" class="form-control" placeholder="00.00" value="creabas" name="creabas" min="0" max="15" />
                                            <div style="background: #E0E1E2;" class="input-group-addon">mg/dL</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <label id="creabas-error" class="input-error" for="creabas" style="border: none; color: red;"></label>
                                    </div>
                                </div>
                            </div>
<div class="row" id="creba2nd">
                                <div class="form-group topo">
                                    <div class="col-md-4">
                                        <label>
                                            Se necessário, informe mais uma medida da creatinina nas 48 horas prévias a randomização, que comprove a elevação de 0,3mg/dL ou incremento de 50% no valor basal: <span style="color:red;">*</span>
                                        </label>
                                    </div>
                                    <div class="col-md-3 exibeEsconde">
                                        <div style="width: 180px;" class="input-group">
                                            <input type="text" class="form-control " placeholder="00.00" value="creabas2" name="creabas2" min="0" max="15" />
                                            <div style="background: #E0E1E2;" class="input-group-addon">mg/dl</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <label id="creabas2-error" class="input-error" for="creabas2" style="border: none; color: red;"></label>
                                        <label id="creabas2-msg" class="text-danger display-none" for="creabas2"></label>
                                    </div>
                                </div>
                            </div>

creabas is the variable of the first field, Creatinine...

creabas2 is the field variable If necessary...

Answer 1

Your script is correct, maybe you missed the parseFloat for the function .val() returns a string, I refactored your code.

//função para calcular a diferença
function formulaCreabas(valorCreabas2, valorCreabas, sucesso, erro) {
    var valorCreabas = parseFloat(valorCreabas);
    var valorCreabas2 = parseFloat(valorCreabas2);
    

    var subCreab = valorCreabas - valorCreabas2
    console.log(subCreab);
    if (subCreab < 0.2999999999999997) {
        if(erro) erro();
    } else {
        if(sucesso) sucesso();
    } 
}

//função de callback caso a diferença esteja ok
function sucessoCreabas() {
  console.info("Cálculo de Creabas ok.");
  //$('#creabas2-msg').addClass('display-none');
}

//função de callback caso a diferença seja menor que 0.3
function erroCreabas() {
  console.error("Não há como comprovar a informação. Dúvidas: entre em contato com a equipe do estudo.");
  //$('#creabas2-msg').removeClass('display-none');
  //$('#creabas2-msg').text('Não há como comprovar a informação. Dúvidas: entre em contato com a equipe do estudo.');
  //$('[name = "creabas2"]').val('');  
}


formulaCreabas(2.3, 2.6, sucessoCreabas, erroCreabas);
formulaCreabas(2.5, 2.6, sucessoCreabas, erroCreabas);

//o que você precisa chamar
//formulaCreabas($('[name="creabas2"]').val(), $('[name="creabas"]').val(), sucessoCreabas, erroCreabas);

Answer 2

function formulaCreabas2() {
    var valueCreabas2 = parseFloat($('[name="creabas2"]').val());
    var valueCrebas = parseFloat($('[name="creabas"]').val()) + 0.3;

    if (valueCreabas2 < valueCrebas) {
        $('#creabas2-msg').removeClass('display-none');
        $('#creabas2-msg').text('Não há como comprovar a informação. Dúvidas: entre em contato com a equipe do estudo.');
        $('[name = "creabas2"]').val('');
    } else {
        $('#creabas2-msg').addClass('display-none');
    }
}

Answer 3

First the properties min and max of your input will not work because they do not apply to type="text", so I switched to the type="number" and added the step="0.1" to increase the desired shape.

I changed the logic a little, instead of checking and alerting the user whenever entered a wrong value, I chose to make it impossible to add a value outside the minimum allowed(It is worth remembering that no client-side validation ensures the security of the information, so validate on the server side as well).

I wiped it down a little bit HTML to get more visual, see if it fits you:

$(function(){  //Executa ao carregar
  valorMinimoCreabas(); //Chama a função que defini o minimo

  $("#creabas").on("change", function(){ //sempre que creabas for alterado
    $("#creabas2").val(""); //Limpo o campo creabas2
    valorMinimoCreabas();  //Redefino o minimo
  });
});

function valorMinimoCreabas(){
  var min = parseFloat($("#creabas").val())+0.3; //Somo 0.3 ao valor originar de creabas
  
  if(!isNaN(min))
    $("#creabas2").prop("min", min); //Defino minimo valor
}

input {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<label for="creabas">
   Creatinina (posterior à admissão hospitalar e a mais   próxima da randomização): 
   <span style="color:red;">*</span>
</label>
   <input type="number" class="form-control" placeholder="00.00" value="2.3" step="0.1" name="creabas" id="creabas" min="0" max="15.0" />
   <span style="background: #E0E1E2;" class="input-group-addon"> mg/dL </span>
</div>
<div>
   <label>
      Se necessário, informe mais uma medida da creatinina nas 48 horas prévias a randomização, que comprove a elevação de 0,3mg/dL ou incremento de 50% no valor basal: 
      <span style="color:red;">*</span>
   </label>
   <input type="number" class="form-control " placeholder="00.00" name="creabas2" id="creabas2" min="0" max="15.0" step="0.1" width="100"/>
<span style="background: #E0E1E2;" class="input-group-addon">
   mg/dl
</span>
</div>