Pessoal tenho esses três campos em um sistema de cadastro de produtos. O primeiro é o preço de custo, o segundo o lucro em cima do primeiro e por ultimo o valor de venda do produto. O que acontece é que para calcular esse valor de venda eu criei uma função em javascript que calcula em cima dos dois primeiros campos e exibe o resultado no terceiro, vejam abaixo:
function calcular() {
var custo = parseInt(document.getElementById("valor_custo").value);
var lucro = parseInt(document.getElementById("lucro_sugerido").value);
var input = document.getElementById("valor_venda");
var result = document.createAttribute("value");
result.value = custo + (custo * (lucro/100));
input.setAttributeNode(result);
}
Aí que começa o problema. A função funciona perfeitamente, porém eu coloquei máscaras nos campos como vocês podem ver na imagem, e a função simplesmente parou de funcionar com as máscaras, funciona apenas com os números, mas quando coloco as máscaras para de funcionar. Se puderem me ajudar ficarei muito grato!
Vejam o código completo:
//jquery para as mascaras de R$
$("#valor_custo").maskMoney({
prefix: "R$",
decimal: ",",
thousands: "."
});
$("#valor_venda").maskMoney({
prefix: "R$",
decimal: ",",
thousands: "."
});
//jquery para a mascara de %
$("#lucro_sugerido").mask("00%");
//função js para retornar o valor de venda
function calcular() {
var custo = parseInt(document.getElementById("valor_custo").value);
var lucro = parseInt(document.getElementById("lucro_sugerido").value);
var input = document.getElementById("valor_venda");
var result = document.createAttribute("value");
result.value = custo + (custo * (lucro/100));
input.setAttributeNode(result);
}
<!-- lembrando que isso está dentro de um <form> -->
<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>
<script src="https://cdn.rawgit.com/plentz/jquery-maskmoney/master/dist/jquery.maskMoney.min.js"></script>
<div class="vendas">
<h4>Preço</h4>
<input type="text" name="valor_custo" id="valor_custo" placeholder="Valor de custo*" required>
<input type="text" name="lucro_sugerido" id="lucro_sugerido" value="50" placeholder="Lucro sugerido*" required>
<input type="number" name="valor_venda" id="valor_venda" onfocus="calcular()" placeholder="Valor de venda*" readonly required>
</div>