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.
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>