1

Estou quebrando a cabeça para tentar fazer com que o código abaixo entenda que o valor da DIV deve ser respeitado a virgula (Ex.: 1,20cm) na qual ficaria:

div1(em centimetros) X div2(em centimetros) = RESULTADO1

RESULTADO1 X 140(valor do metro quadrado) = VALOR EM MOEDA R$

Não consigo enxergar o erro por mais leigo que seja...

JSFIDDLE

*EDITADO

Adaptei para minha necessidade mas ainda assim o Jquery não reconhece a unidade de medida em centímetros...

Se coloco: Altura = 1,90 Ele desconsidera o ",90"

Se coloco: Altura = 190 Ele dá um resultado exorbitante

JSFIDDLE

1
  • Por que você não usa parseFloat(suaStringAqui).toFixed(2)?
    – user86792
    12/08/2017 às 3:23

3 Respostas 3

0

Já tens uma resposta aceite, mas acho que o problema pode ser resolvido de maneira mais eficaz.

As ideias são:

  • cria uma array ['.larg', '.alt', '.metro'] com os valores a multiplicar e corre isso num redutor mudando , para . pois o JavaScript usa ponto como separador decimal
  • usa o toLocaleString para reformatar o numero (falei sobre isso aqui)

Sugestão:

var res = ['.larg', '.alt', '.metro'].reduce(function(sum, sel) {
  var nr = $(sel).text().replace(/\./g, '').replace(/,/g, '.');
  return sum * Number(nr);
}, 1).toLocaleString(undefined, {
  minimumFractionDigits: 2
});
$('.resu').text("R$ " + res);
label div {display: inline;}
label {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>largura = <div class="larg">0,70</div></label>
<label>Altura = <div class="alt">1,20</div></label>
<label>Metro = <div class="metro">140</div></label>
<label>TOTAL = <div class="resu">0</div></label>

1
  • 1
    Caiu como uma luva... Simplificou bastante e aprendi como trabalhar com arrays decentemente 15/08/2017 às 1:13
0

var test = 'R$ 1.700,90';


function getMoney( str )
{
        return parseInt( str.replace(/[\D]+/g,'') );
}
function formatReal( int )
{
        var tmp = int+'';
        tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
        if( tmp.length > 6 )
                tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");

        return tmp;
}


var int = getMoney( test );
//alert( int );

document.getElementById('resultado1').innerHTML = formatReal( 1000 );
document.getElementById('resultado2').innerHTML = formatReal( 19990020 );
document.getElementById('resultado3').innerHTML = formatReal( 12006 );
document.getElementById('resultado4').innerHTML = formatReal( 120090 );
document.getElementById('resultado5').innerHTML = formatReal( int );
<div id="resultado1"></div>
<div id="resultado2"></div>
<div id="resultado3"></div>
<div id="resultado4"></div>
<div id="resultado5"></div>

Edit #1:

Altere parseInt para parseFloat

var sum = $('.larg').text(); 
      var sum2 = $('.alt').text();
      var sum3 = $('.metro').text();

        if(sum == "") sum = 0;
        if(sum2 == "") sum2 = 0;
        if(sum3 == "") sum3 = 0;

        var resultado   = parseFloat(sum) * parseFloat(sum2) * parseFloat(sum3);

function getMoney( str )
{
        return parseInt( str.replace(/[\D]+/g,'') );
}
function formatReal( int )
{
        var tmp = int+'';
        tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
        if( tmp.length > 6 )
                tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");

        return tmp;
}

document.getElementById('resu').innerHTML = formatReal( resultado );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
largura = <div class="larg">0.70</div><!-- EM Centimetros-->
Altura = <div class="alt">1.20</div><!-- EM Centimetros-->
Metro = <div class="metro">140</div><!-- valor em moeda do Metro quadrado-->

TOTAL = <div id="resu">0</div> <!-- Resultado em moeda-->

7
  • Achei interessante sua proposta mas o sacrifício está sendo fazer o jquery reconhecer a unidade de medida em centimetros... Altura = <div class="alt">1,90</div> ele não reconhece essa medida 12/08/2017 às 3:04
  • altere para 1.90
    – NoobSaibot
    12/08/2017 às 3:06
  • com ponto ou com vírgula ele não reconhece: jsfiddle.net/leoknd/z8d7ot3k 12/08/2017 às 3:11
  • Qual é o resultado que é pra dar ?
    – NoobSaibot
    12/08/2017 às 3:12
  • O calculo deveria ser em metro quadrado, ou seja: 1,20(um metro e 20cm) X 0,70 (70 centimetros) X 140 (140 reais) = R$ 117,60 12/08/2017 às 3:14
0

Adianto que a minha resposta é 50% da pergunta: Não consegui aplicar mascara. Porém tenho algumas coisas para te dizer:

  1. Não é bom adicionar tudo em divs como você fez ! Use inputs é para isso que eles servem, principalmente para processamento de dados que é o seu caso.
  2. O dado retirado da div vieram em forma de string com virgula, e dificilmente você iria conseguir fazer algo com isso, usa-se "."(ponto) para calculo com numeros decimais. Criei inputsdo tipo number decimais assim o valor já vem formatado.
  3. Você estava tentando dar um parseInt num numero decimal, até ai ok, mas dificilmente você iria chegar no resultado esperado, pois estava "arredondando" tudo. Você deveria usar parseFloat como na resposta do nosso colega Wellingthon.

São algumas observações que eu espero que você e outros usuários possam ler, pois são muito importantes.

Segue o código com o calculo e os valores corretos, só falta a mascara, tentei aplicar o JQuery Markmoney porém sem sucesso. Caso alguém consiga fique a vontade para editar.

Resposta em andamento, estarei editando depois com o restante das informações e mascara.

$(document).ready( function() {
        
       $("#calc-buton").click(function() { 
        var sum = $('#largura').val();
        var sum2 = $('#altura').val();
        var sum3 = $('#valorMQuadrado').val();

        if (sum == "") sum = 0;
        if (sum2 == "") sum2 = 0;
        if (sum3 == "") sum3 = 0;

        var resultado = (sum * sum2) * sum3;
        $('#total').val(resultado);     
        
        
  });
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/dist/jquery.mask.min.js"></script>
<script>

</script>

<table>
  <tr>
    <td>Largura:</td>
    <td><input type='number' id='largura' step='0.01' value='2.5' /> </td>
  </tr>

  <tr>
    <td>Altura:</td>
    <td><input type='number' id='altura' step='0.01' value='2.1' /> </td>
  </tr>

  <tr>
    <td>Valor metro²:</td>
    <td><input type='number' id='valorMQuadrado' step='0.01' value='1' /> </td>
  </tr>
  <tr>
    <td>Total:</td>
    <td><input type='text' id='total'  readonly /> </td>
  </tr>

  <tr>
    <td colspan='2'><input type='button' id='calc-buton' value='calcular'></td>
  </tr>
</table>

2
  • Obrigado Xara... O uso das div foi devido a única solução encontrada para que fosse possível alterar um resultado de um retorno que tinha de uma postagem do wordpress para que então conseguisse atualizar os dados... Foi uma gambiarra? Sim! rsrsrs, mas para um leigo que sou... foi a unica solução ... obrigado pelas dicas 12/08/2017 às 3:47
  • De nada ;) gambiarra as vezs acaba sendo necessário mesmo, mas cuidado eim, use-as com sabedoria kkk 12/08/2017 às 4:00

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 .