Problems with displaying values in Javascript

Question

Speak people, blz? So, I have a problem here when it comes to displaying a value with Javascript. I can do the bill and calculate everything smoothly, the problem is that when I put a value from 1,000.00 in the field Value of cost (R$) my result in the field Sale value (R$) is totally wrong. (See the GIF below).

I’m sure it has something to do with that spot, but I couldn’t figure it out at all. If anyone could help, I’d be most grateful!

Follow the codes there:

function calcular() {
    document.querySelector(".valor_venda label").classList.add("descricao-fixa");
    var custo = parseFloat(document.getElementById("valor_custo").value.replace(",", "."));
    var lucro = document.getElementById("lucro").value;
    var input = document.getElementById("valor_venda");
    // var result = document.createAttribute("value");
    // result.value = custo + (custo * (lucro/100));
    // input.setAttributeNode(result);
    input.value = (custo + (custo * (lucro / 100))).toFixed(2).replace(".", ",");

    console.log(lucro);

    if (document.querySelector(".valor_venda input").length == 0) {
        document.querySelector(".valor_venda label").classList.remove("descricao-fixa");
    }
}


// adiciona mascara aos campos de preço
function aplicaMascaras() {
    $("#valor_custo").mask('#.##0,00', {
        reverse: true
    });
    $("#valor_venda").mask('#.##0,00', {
        reverse: true
    });
}

// fixar descrição do campo
function fixarDescricao() {
    var campo = $('.campo-formulario');
    var descricao = $('.descricao-campo');
    campo.on('input', function() {
        var descricaoAtual = $(this).parent().find('.descricao-campo');
        if ($(this).val().length > 0) {
            descricaoAtual.addClass('descricao-fixa');
        } else {
            descricaoAtual.removeClass('descricao-fixa');
        }
    });
}

.formulario-cadastro-produto {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo-secao {
    font-family: 'Titulos';
    text-align: center;
    color: #333;
    font-size: 130%;
    margin-top: 20px;
}

.titulo-secao::before {
    content: '- ';
    color: dodgerblue;
}

.titulo-secao::after {
    content: ' -';
    color: dodgerblue;
}

input {
    outline: none;
    width: 100%;
    border: 1px solid #ccc;
    height: 45px;
    padding: 0 15px;
    font-family: 'Texto';
    color: #222;
    font-size: 105%;
    background: none;
    z-index: 3;
    margin-bottom: 20px;
}

.container-campo {
    width: 49%;
    position: relative;
}

.descricao-campo {
    position: absolute;
    left: 15px;
    top: 10px;
    transition: all .2s;
    cursor: text;
    z-index: 1;
    -webkit-user-select: none;
       -moz-user-select: -moz-none;
        -ms-user-select: none;
            user-select: none;
}

.descricao-fixa {
    top: -10px;
    left: 8px;
    transition: all .2s;
    z-index: 3;
    background: #fff;
    padding: 0 5px;
    font-size: 80%;
    font-weight: bold;
}

input:focus ~ .descricao-campo {
    top: -10px;
    left: 8px;
    transition: all .2s;
    z-index: 3;
    background: #fff;
    padding: 0 5px;
    font-size: 80%;
    color: dodgerblue;
    font-weight: bold;
}

input:focus {
    border: 1.5px solid dodgerblue;
}

.campos-dados-produto, .campos-dados-estoque, .campos-dados-venda {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
}

.dados-produto, .dados-estoque, .dados-venda {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideUp 1.3s;
}

/* MEDIA QUERIES */

@media screen and (max-width: 626px) {
    .container-campo {
        width: 100%;
    }
}

 

<section class="dados-venda">
    <p class="titulo-secao">dados de venda</p>
    <div class="campos-dados-venda">
        <div class="container-campo valor_custo">
            <input type="text" name="valor_custo" class="campo-formulario" id="valor_custo">
            <label class="descricao-campo" for="valor_custo">Valor de custo (R$)</label>
        </div>
        <div class="container-campo">
            <input type="text" name="lucro" class="campo-formulario" id="lucro" onkeyup="calcular()" onkeydown="calcular()">
            <label class="descricao-campo" for="lucro">Porcentagem de lucro (%)</label>
        </div>
        <div class="container-campo valor_venda">
            <input type="text" name="valor_venda" class="campo-formulario" id="valor_venda">
            <label class="descricao-campo" for="valor_venda">Valor de venda (R$)*</label>
        </div>
    </div>
</section>

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

Answer 1

Its problem is at the very beginning of the calculating function, as it takes the field as string "1,000.00" and replaces "," with "." then its cost value becomes a string "1,000.00" in parseFloat that becomes 1.

One of the ways you can fix this problem is to replace all "." with "" before replacing the ","by "."

Summarizing change this line

var custo = parseFloat(document.getElementById("valor_custo").value.replace(",", "."));

along that line

var custo = parseFloat(document.getElementById("valor_custo").value.replace(".", "").replace(',', '.'));