Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Valores de Moeda R$

Como faço para que o valor do campo4 apareça da seguinte forma R$ 3.100,98

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form action="" method="">
    <input name="campo1" id="campo1" value="25,60" /><br />
    <input name="campo2" id="campo2" value="5,15" /><br />
    <input name="campo3" id="campo3" value="2,63" /><br />
    <input name="campo4" readonly="readonly" id="campo4" /><br />
    <input type="button" onclick="soma()" value="Soma de Valores" />
</form>
<script type="text/javascript">
    function id( el ){
        return document.getElementById( el );
}
function getMoney( el ){
        var money = id( el ).value.replace( ',', '.' );
        return parseFloat( money )*100;
}
function soma()
{
        var total = getMoney('campo1')+getMoney('campo2')+getMoney('campo3');
        id('campo4').value = 'R$ '+total/100;
}

    </script>
</body>
</html>
4 respostas

Você vai precisar de uma biblioteca, não existe uma maneira muito fácil de fazer isso, mas você pode olhar aqui nesse link.

com esse meu código a única forma seria inda importar uma biblioteca?

ele dessa forma já está me entregando R$ 2.93, R$ 2.4, para que ele me entregue R$ 2,93, R$ 2,40 teria outra dica

solução

Oi Tacio, é possível fazer sem lib, no entanto, vai demandar um conhecimento mais profundo da linguagem JavaScript e esse não é o foco do treinamento de lógica, que tem maior foco na lógica. Inclusive, nem era necessário ter as outras tag's que você colocou (acredito que você já tenha algum experiência com HTML, por isso quis adiciona-las).

No entanto, para lançar uma luz no problema apresentado por você, vou tentar resolvê-lo usando a menor quantidade de código possível para que você tenha um norte a media que for evoluindo na linguagem JavaScript. Beleza?

Vou explicar as particularidades em comentário no código. Fui verboso nos nomes das variáveis para deixar claro o que cada parte esta fazendo:

function id( el ){

  return document.getElementById( el );
}
function getMoney( el ){
        var money = id( el ).value.replace( ',', '.' );
        return parseFloat( money )*100;
}
function soma() {
  var total = getMoney('campo1')+getMoney('campo2')+getMoney('campo3');
  // USANDO A NOVA FUNÇÃO!
  id('campo4').value = numeroParaReal(total/100);
}

// NOVA FUNÇÃO! A QUE FAZ A CONVERSÃO!
function numeroParaReal(numero) {

  console.log(numero);
  // todo número possui a função to Fixed que o converte para STRING com o número de casas decimais que indicarmos.
  var totalComDoisDigitosComoString = numero.toFixed(2);

  // Veja o resultado!
  console.log(totalComDoisDigitosComoString);

  // como nosso numero é uma string, toda string possui o método replace que permite trocar parte dele. No caso, estamos trocando ponto por vírgula. O método devolve uma nova string com a modificação.
  var numeroComoStringComPontoTrocadoPorVirgula = totalComDoisDigitosComoString.replace('.', ',');

  // veja o resultado
  console.log(numeroComoStringComPontoTrocadoPorVirgula);

  // agora retorno a concatenação de R$ com a string que represnta nosso número
  return "R$ " + numeroComoStringComPontoTrocadoPorVirgula;
}

Ou eu posso fazer assim:

function numeroParaReal(numero) {

  return "R$ " + numero.toFixed(2).replace('.', ',');
}

Mas é como eu disse, a media que for evoluindo na linguagem, se ela é a linguagem de sua escolha, novos truques você aprenderá.

Sucesso e bom estudo!

Exatamente Isso Meu caro