Javascript 2 Decimal Float Concats Instead of adding

Question

Just Trying to Parse some numbers I'm getting some end up with 2 Decimals. The Input gets pushed out as a string to the page so I need to parse it to use it.

But for some reason, my Total Value is getting concatenated instead of the 2 values being added. Removing the .toFixed(); Has intended behaviour Excluding the wanted decimal points. Added it causes the values to concat.

function update() {
                var servicefee = 1300;
                        var select = document.getElementById('select-visa');
                var cost = select.options[select.selectedIndex].value;

                var total = parseInt(servicefee) + parseFloat(cost).toFixed(2);
                document.getElementById('total').innerHTML =  total;
            }

<select id="select-visa" class="selectpicker "  onChange="update()" aria-label="Default select example" >
    <option value="1725,52">Example 1</option>
    <option value="200">Example 2</option>
    
 </select>
    

<p id="total"></p>

Would appreciate it if you could explain why adding decimal points to the float causes this behaviour.

`toFixed()` change the number to a `string`. When adding `string` with `number`, the `number` automatically get converted to a `string` and two `string`s get concated. Use `toFixed()` only after you have finished all calculation. If you really want to round a number without convert it to string, [see this post](https://stackoverflow.com/questions/11832914/how-to-round-to-at-most-2-decimal-places-if-necessary) — Ricky Mo, Oct 27 '21 at 09:24

Nitheesh · Accepted Answer · 2021-10-27T09:33:19.520

Number.prototype.toFixed() return string as response. Adding a string to a number will typecast the result to string.

So you should set total as

var total = parseInt(servicefee) + +parseFloat(cost).toFixed(2);

The + symbol infront of +parseFloat(cost).toFixed(2); will convert the string to number.

Or else you can perform the addition and add .toFixed(2) to the total to keep the decimal places in the final result

Working Fiddle

function update() {
    var servicefee = 1300;
    var select = document.getElementById('select-visa');
    var cost = select.options[select.selectedIndex].value;
    var total = parseInt(servicefee) + parseFloat(cost);
    document.getElementById('total').innerHTML =  total.toFixed(2);
}

<select id="select-visa" class="selectpicker "  onChange="update()" aria-label="Default select example" >
    <option value="1725.52">Example 1</option>
    <option value="200">Example 2</option>
</select>
    
<p id="total"></p>

Something I forgot to add to the qeustion was how do i get it to keep the trailing 0 on the decimal i Just think its easier to read that way. Im assuming id have to convert back to a string and use .toFixed Btw thanks for the answer — Someguy, Oct 27 '21 at 09:31
you can perform the addition and add .toFixed(2) to the total to keep the decimal places in the final result. I have updated the answer — Nitheesh, Oct 27 '21 at 09:33

Javascript 2 Decimal Float Concats Instead of adding

1 Answers1