Two numbers don’t add up, they concatenate

Question

You may already be bald to see problems like this. My problem, I believe, is a little different.

I have a method (called transformParaContas) that transforms any kind of monetary value to be able to calculate. However, even transforming, I’m not able to use these numbers to add up. I made a method to check if the return of the transformParaContas is really numerical, and yes, always true.

Methods:

function transformaParaContas(value){
    if(value.indexOf(".") >= 0){
        value   =   value.replace(/\./g, "");
    }

    value   =   value.replace(",", ".");
    value   =   Number(value);
    value   =   value.toFixed(2);
    return value;
}

// metodo para verificar se é realmente um número 
function isNumber(numero){ 
    return !isNaN(numero);
}

// disparo
$("input[name='txt_valNaoProcedente']").on("keypress", function(){
    var valProc, valNaoProc, total;
    valProc     =   $("input[name='txt_valProcedente']").val();
    valNaoProc  =   $("input[name='txt_valNaoProcedente']").val();
    if(valProc != "" && valNaoProc != ""){
        valProc     =   transformaParaContas(valProc);
        valNaoProc  =   transformaParaContas(valNaoProc);

        console.log(isNumber(valProc));
        console.log(isNumber(valNaoProc));

        total       =   valProc + valNaoProc;

        $("#div_valorDebito").text(valProc + valNaoProc);
    }else{
        $("#div_valorDebito").text("");
    }
});

If I do this, it works:

$("input[name='txt_valNaoProcedente']").on("keypress", function(){
    var valProc, valNaoProc, total;
    valProc     =   $("input[name='txt_valProcedente']").val();
    valNaoProc  =   $("input[name='txt_valNaoProcedente']").val();
    if(valProc != "" && valNaoProc != ""){
        valProc     =   transformaParaContas(valProc);
        valNaoProc  =   transformaParaContas(valNaoProc);
        valProc     =   Number(valProc);
        valNaoProc  =   Number(valNaoProc);

        console.log(isNumber(valProc));
        console.log(isNumber(valNaoProc));

        total       =   valProc + valNaoProc;

        $("#div_valorDebito").text(valProc + valNaoProc);
    }else{
        $("#div_valorDebito").text("");
    }
});

Would someone like to explain to me why this happens?

Answer 1

Dear friend, the function toFixed(n) will always return a type string why there is concatenation and not the sum of its values. And that’s why when you use Number works.

For a less dramatic change so to speak, consider returns the value your function transformaParaContas(value) already as number, that would be a return Number(value);

Another thing, which is just a curiosity, but it’s always worth it to be on the lookout, you’ve created a variable total that is never being used. Consider removing, or improving your code, for example:

$("input[name='txt_valNaoProcedente']").on("keypress", function(){
    var valProc, valNaoProc, total = ""; // Valor já iniciado
    valProc     =   $("input[name='txt_valProcedente']").val();
    valNaoProc  =   $("input[name='txt_valNaoProcedente']").val();
    if(valProc != "" && valNaoProc != ""){
        valProc     =   transformaParaContas(valProc);
        valNaoProc  =   transformaParaContas(valNaoProc);
        valProc     =   Number(valProc);
        valNaoProc  =   Number(valNaoProc);

        console.log(isNumber(valProc));
        console.log(isNumber(valNaoProc));

        total       =   valProc + valNaoProc;
    }
    $("#div_valorDebito").text(total);
});