Product Calculator - Rounding a function return

Question

I am creating a product calculator for bags of compost. The user inputs the dimensions of their garden, one function returns the actual volume of their garden, another returns the number of bags needed to fill this volume. The Total Bags function multiplies volume by 120% (1.2) to include 20% overage product. Multiplying for overage returns decimal places, customers can only buy whole bags of product so it would be best to round this number.

Here's the original code which returns a bag total with decimal place. This updates functions on input for both total bags needed and a visual volume equation for the user to see and confirm.

<script>
// on length input
$('#input-length').on('input', function(){
  // update length text
  $('#text-total-length').text(formatNumber($(this).val()));  
  // update total volume text
  $('#text-total-volume').text(formatNumber(calculateTotalVolume()));
  // update total bags text
  $('#text-total-bags').text(formatNumber(calculateTotalBags()));
});

// on width input
$('#input-width').on('input', function(){
  // update width text
  $('#text-total-width').text(formatNumber($(this).val()));  
  // update total volume text
  $('#text-total-volume').text(formatNumber(calculateTotalVolume()));
  // update total bags text
  $('#text-total-bags').text(formatNumber(calculateTotalBags()));
});

// on depth input
$('#input-depth').on('input', function(){
  // update depth text
  $('#text-total-depth').text(formatNumber($(this).val()));  
  // update total volume text
  $('#text-total-volume').text(formatNumber(calculateTotalVolume()));
  // update total bags text
  $('#text-total-bags').text(formatNumber(calculateTotalBags()));
});

// calculate total volume
function calculateTotalVolume(){
  // get length value
  const length = Number($('#input-length').val());
  // get width value
  const width = Number($('#input-width').val());
  // get depth value
  const depth = Number($('#input-depth').val());
  // multiply length width depth to get total volume
  return length * width * depth;
}

// calculate total bags
function calculateTotalBags(){
  // get length value
  const length = Number($('#input-length').val());
  // get width value
  const width = Number($('#input-width').val());
  // get depth value
  const depth = Number($('#input-depth').val());
  // multiply length width depth 1.2 to get total bags
  return length * width * depth * 1.2;
}

// format number function
// e.g. 3500 becomes 3,500
function formatNumber(num){
  return new Intl.NumberFormat().format(num);
}
</script>

I have tried creating a new function to Math.round() the calculateTotalBags function but it returns NaN. This also added another text update on all inputs to see if the original decimal return still worked, it did. See below this attempt.

<script>
// on length input
$('#input-length').on('input', function(){
  // update length text
  $('#text-total-length').text(formatNumber($(this).val()));  
  // update total volume text
  $('#text-total-volume').text(formatNumber(calculateTotalVolume()));
  // update total bags text
  $('#text-total-bags').text(formatNumber(calculateTotalBags()));
  // update total bags rounded text
  $('#text-total-bags-round').text(formatNumber(roundTotalBags()));
});

// on width input
$('#input-width').on('input', function(){
  // update width text
  $('#text-total-width').text(formatNumber($(this).val()));  
  // update total volume text
  $('#text-total-volume').text(formatNumber(calculateTotalVolume()));
  // update total bags text
  $('#text-total-bags').text(formatNumber(calculateTotalBags()));
  // update total bags rounded text
  $('#text-total-bags-round').text(formatNumber(roundTotalBags()));
});

// on depth input
$('#input-depth').on('input', function(){
  // update depth text
  $('#text-total-depth').text(formatNumber($(this).val()));  
  // update total volume text
  $('#text-total-volume').text(formatNumber(calculateTotalVolume()));
  // update total bags text
  $('#text-total-bags').text(formatNumber(calculateTotalBags()));
  // update total bags rounded text
  $('#text-total-bags-round').text(formatNumber(roundTotalBags()));
});

// calculate total volume
function calculateTotalVolume(){
  // get length value
  const length = Number($('#input-length').val());
  // get width value
  const width = Number($('#input-width').val());
  // get depth value
  const depth = Number($('#input-depth').val());
  // multiply length width depth to get total volume
  return length * width * depth;
}

// calculate total bags
function calculateTotalBags(){
  // get length value
  const length = Number($('#input-length').val());
  // get width value
  const width = Number($('#input-width').val());
  // get depth value
  const depth = Number($('#input-depth').val());
  // multiply length width depth 1.2 to get total bags
  return length * width * depth * 1.2;
}

// round total bags
function roundTotalBags(){
// round calculateTotalBags value
return Math.round(calculateTotalBags);
}

// format number function
// e.g. 3500 becomes 3,500
function formatNumber(num){
  return new Intl.NumberFormat().format(num);
}
</script>

I am unsure how to resolve the NaN error and ultimately display the calculateTotalBags function as a rounded integer. Thanks in advance for any help.

Answer 1

functions in Javascript are treated as objects, just like any other variable. You can pass them to other functions and that's the problem.

You're passing to Math.round() function calculateTotalBags so it's not called and as function object isn't number, it returns NaN .

An easy fix is as follows:

// round total bags
function roundTotalBags(){
  // round calculateTotalBags value
  return Math.round(calculateTotalBags());
}

Hope it helped