1

Fala pessoal, blz? Então, to com um problema aqui na hora de exibir um valor com Javascript. Consigo fazer a conta certinha e calcular tudo tranquilo, o problema é que quando coloco um valor a partir de 1.000,00 no campo Valor de custo (R$) o meu resultado no campo Valor de venda (R$) fica totalmente errado. (Vejam o GIF abaixo).

inserir a descrição da imagem aqui

Eu tenho certeza que tem alguma coisa a ver com aquele ponto, mas não consegui arrumar de jeito nenhum. Se alguém puder ajudar ficaria muito agradecido!

Segue os códigos ai:

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>

1 Resposta 1

2

O seu problema está logo no início da função calcular, pois ele pega o campo como string "1.000,00" e substitui a ","por "." logo o seu valor de custo se torna uma string "1.000.00" no parseFloat isso se torna 1.

Uma das formas de você corrigir esse problema é substituir todos os "." por "" antes de substituir a ","por "."

Resumindo trocar essa linha

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

por essa linha

var custo = parseFloat(document.getElementById("valor_custo").value.replace(".", "").replace(',', '.'));
1
  • boa!! isso funcionou. era bem simples. agora, na hora que ele exibe o resultado, aparece por exemplo "1000,00". como eu faço pra devolver o ponto pro lugar e ficar "1.000,00"??
    – Sallazar
    9/04/2019 às 19:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .