Jquery calculation of centimeters with result in currency

1

I am breaking my head to try to make the code below understand that the value of the DIV must be respected the comma (Ex .: 1.20cm) in which it would be:

div1 (in centimeters) X div2 (in centimeters) = RESULT1

RESULT1 X 140 (square meter value) = VALUE IN CURRENCY R $

I can not see the error no matter how lazy it is ...

JSFIDDLE

* EDITED

I have adapted to my need but still Jquery does not recognize the unit of measurement in centimeters ...

If I put: Height = 1.90 He disregards the ", 90"

If I put: Height = 190 It gives an exorbitant result

JSFIDDLE

    
asked by anonymous 12.08.2017 / 04:20

3 answers

0

You already have an accepted answer, but I think the problem can be solved more effectively.

The ideas are:

  • creates a ['.larg', '.alt', '.metro'] array with values to be multiplied and runs on a wrapper changing , to . because JavaScript uses decimal point
  • use toLocaleString to reformat the number ( I talked about it here )

Suggestion:

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=<divclass="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>
    
12.08.2017 / 06:51
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:

  

Change parseInt to 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=<divclass="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-->
    
12.08.2017 / 04:46
0

Next, my answer is 50% of the question: I could not apply mascara. But I have some things to tell you:

  • It's not good to add everything to divs like you did! Use inputs is what they serve, especially for data processing that is your case.
  • The data taken from div came in the form of string with comma, and you would hardly be able to do anything with it, use "." (point) to calculate with decimal numbers. I created inputs of type number decimal so the value is already formatted.
  • You were trying to give a% of% to a decimal, until then okay, but you would hardly get the expected result because it was "rounding" everything up. You should use parseInt as in the response of our colleague Wellingthon.
  • These are some comments that I hope you and other users can read as they are very important .

    Follow the code with the correct calculation and values, just missing the mascara, I tried to apply the JQuery Markmoney , however without success. If anyone gets the feel to edit it.

      

    Response in progress, I'll be editing later with the rest of the information and masquerading.   

    $(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><scriptsrc="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>
        
    12.08.2017 / 05:43