Simple multiplication in JavaScript with decimal

Navigation
0

As seen in the Simple JavaScript multiplication , I was able to multiply the response.rows [0] .elements [0] .distance.text value by x30 in the Maps script v3.

The final code looks like this: 

<!DOCTYPE html>
<head><title>Cálculo de distância</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-language" content="pt-br" />
<script src="http://code.jquery.com/jquery-1.8.1.js"type="text/javascript"></script>
</head>
<body style="font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size:13px;">

<div style="border: 2px solid #747474; padding: 10px; width: 800px;">
    <form method="post" action="default.aspx?id=205" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')" id="form1">
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript">
	
        function CalculaDistancia() {
            $('#litResultado').html('Aguarde...');
            //Instanciar o DistanceMatrixService
            var service = new google.maps.DistanceMatrixService();
            //executar o DistanceMatrixService
            service.getDistanceMatrix(
              {
                  //Origem
                  origins: [$("#txtOrigem").val()],
                  //Destino
                  destinations: [$("#txtDestino").val()],
                  //Modo (DRIVING | WALKING | BICYCLING)
                  travelMode: google.maps.TravelMode.DRIVING,
                  //Sistema de medida (METRIC | IMPERIAL)
                  unitSystem: google.maps.UnitSystem.METRIC
                  //Vai chamar o callback
              }, callback);
        }
        //Tratar o retorno do DistanceMatrixService
        function callback(response, status) {
            //Verificar o Status
            if (status != google.maps.DistanceMatrixStatus.OK)
                //Se o status n�o for "OK"
                $('#litResultado').html(status);
            else {
                //Se o status for OK
                //Endere�o de origem = response.originAddresses
                //Endere�o de destino = response.destinationAddresses
                //Dist�ncia = response.rows[0].elements[0].distance.text
                //Dura��o = response.rows[0].elements[0].duration.text
                $('#litResultado').html("<strong>Origem</strong>: " + response.originAddresses +
                    "<br /><strong>Destino:</strong> " + response.destinationAddresses +
                    "<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
                    " <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text +
					"<br /><strong>R$</strong> <input style='border: none; font-size: 26px;' type='text' value='" + (parseInt(response.rows[0].elements[0].distance.text, 10) * 30) + "'>"
                    );
                //Atualizar o mapa
                $("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed");
            }
        }
		
    </script>
    <table width="736" border="0" cellpadding="2" class="contact fleft" style="margin: 0 0 10px">
    <tbody>
        <tr>
            <td width="215" align="left"><label for="txtOrigem"><strong>Endere&ccedil;o de origem
            </strong><br>
              <span style="color:#E41E26;">(ex: rua pedro joao coeli limeira)</span></label></td>
            <td width="308"><input style="padding:2px; border: 2px solid #747474; color: #747474; text-transform:uppercase; height: 30px;" type="text" class="field" id="txtOrigem" size="50" /></td>
            <td width="2" rowspan="2"><svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="80px" height="80px" viewBox="0 0 200.000000 200.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata></metadata>
<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M905 1990 c-417 -45 -766 -345 -867 -746 -33 -130 -33 -361 0 -489
91 -349 367 -627 709 -714 443 -113 881 70 1115 464 182 307 171 731 -27 1035
-63 96 -199 232 -295 295 -178 116 -429 177 -635 155z m325 -95 c36 -9 115
-41 175 -70 192 -93 327 -228 420 -420 77 -158 90 -218 90 -405 0 -181 -13
-244 -81 -388 -96 -206 -240 -350 -445 -446 -145 -68 -208 -81 -389 -81 -131
0 -168 4 -235 23 -470 134 -753 580 -670 1057 65 369 343 654 726 740 85 19
319 14 409 -10z"/>
<path d="M1220 1866 c0 -4 9 -25 20 -47 101 -198 144 -475 93 -605 -27 -68
-65 -116 -121 -155 -38 -26 -42 -30 -19 -25 15 4 27 4 27 2 0 -3 -12 -12 -27
-21 -27 -15 -27 -16 -3 -10 14 4 43 19 65 34 161 109 227 461 124 663 -11 21
-21 38 -23 38 -1 0 3 -28 10 -62 8 -35 13 -83 13 -108 0 -45 0 -44 -22 30 -23
78 -83 204 -117 248 -11 13 -20 22 -20 18z"/>
<path d="M1524 1542 c-2 -142 -14 -222 -50 -331 -45 -135 -130 -232 -229 -261
-22 -7 -49 -16 -60 -20 -17 -7 -16 -9 10 -10 26 -1 27 -3 10 -10 -20 -8 -20
-9 1 -9 68 -3 177 68 250 163 102 130 145 242 143 376 l-1 75 -18 -82 c-11
-46 -23 -89 -27 -97 -4 -8 -8 54 -8 137 -1 84 -5 162 -10 174 -7 15 -10 -15
-11 -105z"/>
<path d="M947 1372 c-20 -45 -57 -80 -94 -87 -12 -3 -34 -7 -47 -10 -14 -3
-28 -16 -36 -34 -6 -16 -20 -37 -31 -47 -11 -10 -19 -30 -19 -47 0 -28 1 -29
13 -13 14 19 37 19 108 1 18 -5 31 -1 42 10 27 26 20 36 -12 18 -27 -16 -30
-16 -55 0 -29 20 -35 57 -11 77 9 8 30 11 55 7 31 -4 40 -2 40 10 0 8 11 24
24 34 26 20 50 77 44 105 -2 11 -10 1 -21 -24z"/>
<path d="M235 1380 c20 -72 82 -174 153 -252 55 -61 27 -44 -51 30 -70 67 -75
68 -28 2 l25 -35 -33 30 c-63 56 -16 -8 52 -71 186 -175 522 -230 657 -108 46
42 70 89 70 141 0 51 -29 83 -73 83 l-32 -1 27 -15 c80 -43 8 -180 -113 -214
-181 -52 -443 101 -609 356 -28 43 -48 68 -45 54z"/>
<path d="M1655 1358 c-2 -7 -12 -35 -21 -63 -46 -142 -138 -295 -213 -354 -57
-46 -126 -73 -187 -74 -44 -2 -51 -4 -38 -14 14 -10 13 -12 -3 -16 -37 -10 64
-6 107 4 149 34 348 230 374 369 7 32 5 31 -24 -20 -17 -30 -40 -64 -51 -75
-16 -17 -15 -9 9 45 25 56 38 99 57 193 4 20 -3 23 -10 5z"/>
<path d="M292 1086 c19 -36 110 -145 136 -162 13 -8 21 -18 18 -21 -3 -3 -27
10 -53 29 -74 53 -79 54 -49 16 67 -88 201 -149 331 -151 84 -1 143 19 176 59
12 15 12 17 0 9 -11 -6 -13 -4 -8 8 4 11 -3 9 -30 -8 -114 -78 -257 -31 -430
141 -56 55 -97 92 -91 80z"/>
<path d="M1036 831 c-94 -128 -117 -280 -70 -466 16 -63 54 -158 60 -152 2 2
-5 30 -16 62 -30 86 -24 101 8 20 27 -68 90 -177 110 -189 6 -3 -9 28 -33 69
-76 133 -123 316 -110 425 8 66 35 138 70 191 34 52 23 50 -15 -3 -42 -57 -38
-31 5 32 46 68 39 76 -9 11z"/>
<path d="M410 841 c19 -18 62 -45 94 -61 64 -32 56 -39 -15 -15 l-44 15 24
-20 c69 -59 255 -66 350 -15 51 28 95 75 66 71 -8 -1 -22 -9 -32 -18 -81 -71
-241 -63 -383 19 -25 15 -56 33 -70 41 -17 10 -14 4 10 -17z"/>
<path d="M935 759 c-37 -73 -65 -191 -65 -273 0 -74 31 -233 50 -264 11 -16
11 -16 6 1 -3 9 -8 48 -11 85 l-5 67 15 -49 c23 -69 27 -52 9 35 -22 107 -15
313 13 392 12 31 20 57 17 57 -2 0 -15 -23 -29 -51z"/>
<path d="M1050 746 c-23 -61 -31 -149 -20 -219 10 -72 59 -186 100 -237 17
-22 17 -17 -5 33 -30 68 -33 95 -6 51 30 -50 48 -53 19 -3 -61 105 -96 259
-80 348 10 55 7 66 -8 27z"/>
</g>
</svg></td>
        </tr>
        <tr>
            <td align="left"><label for="txtDestino"><strong>Endere&ccedil;o de destino
            </strong><br>
              <span style="color:#E41E26;">(ex: av brasil rio de janeiro)</span></label></td>
            <td><input type="text" class="field" id="txtDestino" style="padding:2px; border: 2px solid #747474; color: #747474; text-transform:uppercase; height: 30px;" value="R. Gen. Rondon, 538 - Vila Labaki, SP, 13486-442, Brasil" size="50" /></td>
        </tr>
        <tr>
          <td colspan="3"><hr><span id="litResultado">&nbsp;</span></td>
        </tr>
        <tr>
          <td><input style="padding:5px; border: 2px solid red; font-weight:bold; color: #FFF; background-color: #E41E26; cursor: pointer;" type="button" class="btnNew" onClick="CalculaDistancia()" value="Calcular" /></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
    


<div style="padding: 10px 0 0; clear: both"><iframe width="795" scrolling="no" height="500" frameborder="0" src="https://maps.google.com/maps?saddr=ruapedrojoaocoeli223limeira&amp;daddr=ruagenrondon538limeira&amp;output=embed" marginwidth="0" marginheight="0" id="map" style="border: 2px solid #747474;"></iframe><center><small>2015 &copy; Fênix Guinchos</small></center></div>
           
<script type="text/javascript">
//<![CDATA[

theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;

theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
WebForm_AutoFocus('btnSearch');//]]>
</script>
</form>
</div>
</body>
</html>

However, multiplication does not consider decimal places, multiplying only integers. How to do a multiplication considering the decimals? Thanks!

    
asked by anonymous 29.12.2014 / 19:40

3 answers

1

I suggest you make a function of this so you do not get confused.

If I remember the previous question this string has "430 Km" , but in case you have "430,2 Km" then you have to change that comma to a point before you can use parseFloat . You can do this with .replace(',','.'); , which works even if you have a dot initially.

Doing a function with this might look like this: 

function multiplicar(string, multiplicador){
    var numero = string.replace(',','.');
    return parseFloat(numero) * multiplicador;
}

In the code you can use: 

"<br /><strong>R$</strong> <input style='border: none; font-size: 26px;' type='text' value='" + multiplicar(response.rows[0].elements[0].distance.text, 30) + "'>"
    
29.12.2014 / 19:56
3

Renan , in which case you do not need to do any conversion, because the Google API returns the value in text and the numerical value. If you debug the response variable response.rows [0] .elements [0] .distance , you will get the following return, Object { text: "152 km", value: 151648 } . However the numeric return is in meters, in case you want to work with the value in KM you will only have to do the conversion, and following your example will look something like this: 

<!DOCTYPE html>
<head><title>Cálculo de distância</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-language" content="pt-br" />
<script src="http://code.jquery.com/jquery-1.8.1.js"type="text/javascript"></script>
</head>
<body style="font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size:13px;">

<div style="border: 2px solid #747474; padding: 10px; width: 800px;">
    <form method="post" action="default.aspx?id=205" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')" id="form1">
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript">
	
        function CalculaDistancia() {
            $('#litResultado').html('Aguarde...');
            //Instanciar o DistanceMatrixService
            var service = new google.maps.DistanceMatrixService();
            //executar o DistanceMatrixService
            service.getDistanceMatrix(
              {
                  //Origem
                  origins: [$("#txtOrigem").val()],
                  //Destino
                  destinations: [$("#txtDestino").val()],
                  //Modo (DRIVING | WALKING | BICYCLING)
                  travelMode: google.maps.TravelMode.DRIVING,
                  //Sistema de medida (METRIC | IMPERIAL)
                  unitSystem: google.maps.UnitSystem.METRIC
                  //Vai chamar o callback
              }, callback);
        }
        //Tratar o retorno do DistanceMatrixService
        function callback(response, status) {
            //Verificar o Status
            if (status != google.maps.DistanceMatrixStatus.OK)
                //Se o status n�o for "OK"
                $('#litResultado').html(status);
            else {
                //Se o status for OK
                //Endere�o de origem = response.originAddresses
                //Endere�o de destino = response.destinationAddresses
                //Dist�ncia = response.rows[0].elements[0].distance.text
                //Dura��o = response.rows[0].elements[0].duration.text
                $('#litResultado').html("<strong>Origem</strong>: " + response.originAddresses +
                    "<br /><strong>Destino:</strong> " + response.destinationAddresses +
                    "<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
                    " <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text +
					"<br /><strong>R$</strong> <input style='border: none; font-size: 26px;' type='text' value='" + ((response.rows[0].elements[0].distance.value)/1000 * 30) + "'>"
                    );
                //Atualizar o mapa
                $("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed");
            }
        }
		
    </script>
    <table width="736" border="0" cellpadding="2" class="contact fleft" style="margin: 0 0 10px">
    <tbody>
        <tr>
            <td width="215" align="left"><label for="txtOrigem"><strong>Endere&ccedil;o de origem
            </strong><br>
              <span style="color:#E41E26;">(ex: rua pedro joao coeli limeira)</span></label></td>
            <td width="308"><input style="padding:2px; border: 2px solid #747474; color: #747474; text-transform:uppercase; height: 30px;" type="text" class="field" id="txtOrigem" size="50" /></td>
            <td width="2" rowspan="2"><svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="80px" height="80px" viewBox="0 0 200.000000 200.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata></metadata>
<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M905 1990 c-417 -45 -766 -345 -867 -746 -33 -130 -33 -361 0 -489
91 -349 367 -627 709 -714 443 -113 881 70 1115 464 182 307 171 731 -27 1035
-63 96 -199 232 -295 295 -178 116 -429 177 -635 155z m325 -95 c36 -9 115
-41 175 -70 192 -93 327 -228 420 -420 77 -158 90 -218 90 -405 0 -181 -13
-244 -81 -388 -96 -206 -240 -350 -445 -446 -145 -68 -208 -81 -389 -81 -131
0 -168 4 -235 23 -470 134 -753 580 -670 1057 65 369 343 654 726 740 85 19
319 14 409 -10z"/>
<path d="M1220 1866 c0 -4 9 -25 20 -47 101 -198 144 -475 93 -605 -27 -68
-65 -116 -121 -155 -38 -26 -42 -30 -19 -25 15 4 27 4 27 2 0 -3 -12 -12 -27
-21 -27 -15 -27 -16 -3 -10 14 4 43 19 65 34 161 109 227 461 124 663 -11 21
-21 38 -23 38 -1 0 3 -28 10 -62 8 -35 13 -83 13 -108 0 -45 0 -44 -22 30 -23
78 -83 204 -117 248 -11 13 -20 22 -20 18z"/>
<path d="M1524 1542 c-2 -142 -14 -222 -50 -331 -45 -135 -130 -232 -229 -261
-22 -7 -49 -16 -60 -20 -17 -7 -16 -9 10 -10 26 -1 27 -3 10 -10 -20 -8 -20
-9 1 -9 68 -3 177 68 250 163 102 130 145 242 143 376 l-1 75 -18 -82 c-11
-46 -23 -89 -27 -97 -4 -8 -8 54 -8 137 -1 84 -5 162 -10 174 -7 15 -10 -15
-11 -105z"/>
<path d="M947 1372 c-20 -45 -57 -80 -94 -87 -12 -3 -34 -7 -47 -10 -14 -3
-28 -16 -36 -34 -6 -16 -20 -37 -31 -47 -11 -10 -19 -30 -19 -47 0 -28 1 -29
13 -13 14 19 37 19 108 1 18 -5 31 -1 42 10 27 26 20 36 -12 18 -27 -16 -30
-16 -55 0 -29 20 -35 57 -11 77 9 8 30 11 55 7 31 -4 40 -2 40 10 0 8 11 24
24 34 26 20 50 77 44 105 -2 11 -10 1 -21 -24z"/>
<path d="M235 1380 c20 -72 82 -174 153 -252 55 -61 27 -44 -51 30 -70 67 -75
68 -28 2 l25 -35 -33 30 c-63 56 -16 -8 52 -71 186 -175 522 -230 657 -108 46
42 70 89 70 141 0 51 -29 83 -73 83 l-32 -1 27 -15 c80 -43 8 -180 -113 -214
-181 -52 -443 101 -609 356 -28 43 -48 68 -45 54z"/>
<path d="M1655 1358 c-2 -7 -12 -35 -21 -63 -46 -142 -138 -295 -213 -354 -57
-46 -126 -73 -187 -74 -44 -2 -51 -4 -38 -14 14 -10 13 -12 -3 -16 -37 -10 64
-6 107 4 149 34 348 230 374 369 7 32 5 31 -24 -20 -17 -30 -40 -64 -51 -75
-16 -17 -15 -9 9 45 25 56 38 99 57 193 4 20 -3 23 -10 5z"/>
<path d="M292 1086 c19 -36 110 -145 136 -162 13 -8 21 -18 18 -21 -3 -3 -27
10 -53 29 -74 53 -79 54 -49 16 67 -88 201 -149 331 -151 84 -1 143 19 176 59
12 15 12 17 0 9 -11 -6 -13 -4 -8 8 4 11 -3 9 -30 -8 -114 -78 -257 -31 -430
141 -56 55 -97 92 -91 80z"/>
<path d="M1036 831 c-94 -128 -117 -280 -70 -466 16 -63 54 -158 60 -152 2 2
-5 30 -16 62 -30 86 -24 101 8 20 27 -68 90 -177 110 -189 6 -3 -9 28 -33 69
-76 133 -123 316 -110 425 8 66 35 138 70 191 34 52 23 50 -15 -3 -42 -57 -38
-31 5 32 46 68 39 76 -9 11z"/>
<path d="M410 841 c19 -18 62 -45 94 -61 64 -32 56 -39 -15 -15 l-44 15 24
-20 c69 -59 255 -66 350 -15 51 28 95 75 66 71 -8 -1 -22 -9 -32 -18 -81 -71
-241 -63 -383 19 -25 15 -56 33 -70 41 -17 10 -14 4 10 -17z"/>
<path d="M935 759 c-37 -73 -65 -191 -65 -273 0 -74 31 -233 50 -264 11 -16
11 -16 6 1 -3 9 -8 48 -11 85 l-5 67 15 -49 c23 -69 27 -52 9 35 -22 107 -15
313 13 392 12 31 20 57 17 57 -2 0 -15 -23 -29 -51z"/>
<path d="M1050 746 c-23 -61 -31 -149 -20 -219 10 -72 59 -186 100 -237 17
-22 17 -17 -5 33 -30 68 -33 95 -6 51 30 -50 48 -53 19 -3 -61 105 -96 259
-80 348 10 55 7 66 -8 27z"/>
</g>
</svg></td>
        </tr>
        <tr>
            <td align="left"><label for="txtDestino"><strong>Endere&ccedil;o de destino
            </strong><br>
              <span style="color:#E41E26;">(ex: av brasil rio de janeiro)</span></label></td>
            <td><input type="text" class="field" id="txtDestino" style="padding:2px; border: 2px solid #747474; color: #747474; text-transform:uppercase; height: 30px;" value="R. Gen. Rondon, 538 - Vila Labaki, SP, 13486-442, Brasil" size="50" /></td>
        </tr>
        <tr>
          <td colspan="3"><hr><span id="litResultado">&nbsp;</span></td>
        </tr>
        <tr>
          <td><input style="padding:5px; border: 2px solid red; font-weight:bold; color: #FFF; background-color: #E41E26; cursor: pointer;" type="button" class="btnNew" onClick="CalculaDistancia()" value="Calcular" /></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
    


<div style="padding: 10px 0 0; clear: both"><iframe width="795" scrolling="no" height="500" frameborder="0" src="https://maps.google.com/maps?saddr=ruapedrojoaocoeli223limeira&amp;daddr=ruagenrondon538limeira&amp;output=embed" marginwidth="0" marginheight="0" id="map" style="border: 2px solid #747474;"></iframe><center><small>2015 &copy; Fênix Guinchos</small></center></div>
           
<script type="text/javascript">
//<![CDATA[

theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;

theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
WebForm_AutoFocus('btnSearch');//]]>
</script>
</form>
</div>
</body>
</html>
    
29.12.2014 / 20:00
1

You can use the parseFloat function instead of converting the variable to integer. 

var exemplo = "30.4";
alert("Int: " + parseInt(exemplo) * 30);
alert("Float: " + parseFloat(exemplo) * 30);

In this part: 

<strong>R$</strong> <input style='border: none; font-size: 26px;' type='text' value='" + (parseFloat(response.rows[0].elements[0].distance.text) * 30) + "'>"
    
29.12.2014 / 19:51
You need to be using android studio to program in react native [closed] ngFor inside ngFor does not work [closed]