Display output as currency value with decimal

[adammahon]

Hi all. On my product page I am using some Javascript which effectively acts as a calculator for the products and then calculates a sub total price. All is working however the output is showing as a whole number, for example: '£5397' instead of '£53.97' could someone help me with what I am missing? I have tried adding .tofixed(2) but this just adds decimals to the end of the code and not in the correct place.

I have added the code below for you to view. Thanks,

<script>
  $( "#ft-unit" ).on('input', function ()  {
  calctiles($('#ft-unit'),$('#ft-wid'),$('#ft-len'));
});

$( "#ft-wid" ).on('input', function () {
  calctiles($('#ft-unit'),$('#ft-wid'),$('#ft-len'));
});

$( "#ft-len" ).on('input', function () {
  calctiles($('#ft-unit'),$('#ft-wid'),$('#ft-len'));
});



//Remove the whitespace
$('.input-row input').bind('input', function(){
    $(this).val(function(_, v){
     return v.replace(/\s+/g, '');
    });
  });

 $(".input-row input").on("keypress keyup blur",function (event) {
     $(this).val($(this).val().replace(/[^0-9\.]/g,''));
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }
        });

function roundHalf(num) {
    return Math.round(num*2)/0;
}


function calctiles(unit, widIn, lenIn){
  
  $('#ft-area-res').text('—');
  $('#ft-qty-res').text('—');
  $('#ft-price-res').text('—');
  
  var unit = $( unit ).val().trim();
  var wid = $( widIn ).val().trim();
  var len = $( lenIn ).val().trim();
  
  var allValues = false;
  
  if(unit && wid && len){
    
    if(unit > 0){
      
      if(wid > 0){
        
        if(len > 0){
          allValues = true;
        }
        
      }
      
    }

  }
  
  if(allValues){
     
    //Divide by 1000 to get mm to m
    var tileBaseWidth = 500/1000;
    var tileBaseLength = 500/1000;
    var pricePerTile = {{- product.price -}};
    {% for tag in product.tags %}
    {% case tag %}
    {% when '3.34' %}var amountPerBox = 3.34;
    {% when '2.6' %}var amountPerBox = 2.6;
    {% when '2.35' %}var amountPerBox = 2.35;
    {% when '2.1' %}var amountPerBox = 2.1;
    {% when '2.39' %}var amountPerBox = 2.39;
    {% when '2.14' %}var amountPerBox = 2.14;
    {% when '1.89' %}var amountPerBox = 1.89;
    {% endcase %}
    {% endfor %}
    
    //we need to convert to metric
    if(unit == 2){
      //imperial
      //1ft = 0.3048m
      //wid = (wid * 0.3048);
      //len = (len * 0.3048);
      
    }
    
    $area_calc = (wid*len).toFixed(1);
    //$area_calc_nearest_half_m =roundHalf($area_calc);
    $('#ft-area-res').text($area_calc);
    
    $tile_size_in_m2 = (amountPerBox);
    $quantity_needed = Math.ceil(($area_calc/$tile_size_in_m2).toFixed(2));
    $('#ft-qty-res').text($quantity_needed);
    
    $price = ($quantity_needed*pricePerTile);
    $('#ft-price-res').text("£"+$price);
    
    $howmuch = ($quantity_needed*amountPerBox).toFixed(2);
    $('#ft-price-howmuch').text($howmuch);
    
    
    
     $('.result-row').slideDown();
    
     }else{
       
       $('.result-row').slideUp();
     }

}
</script>