Can't get my custom calculator to work - won't output any results

Design help Custom code
1

On the calculator page, I have added code in the custom code box. My goal is to take the two inputs and calculate the outputs as seen on the website read only link. I can’t figure out why it won’t work. I’m new to Webflow and Javascript, so I probably made a dumb mistake, but I just can’t figure out what I am doing wrong. I’d appreciate some help figuring out how to get my code to work so that it will modify the text when someone puts information into the input fields.

Here is an image of the page, the zeros should be different numbers since I have put values into the two input fields:

webflow calc
webflow calc796×642 38.2 KB

Here is the code:

`<script>
$(document).ready(function() {
  $('#currentBill').on('input', function(){
    let currentBill = $(this).val();
    let escalationRate = $('#escalationRate').val();

    if(!escalationRate) return;

    calculateFutureCost(currentBill, escalationRate);
  });

  $('#escalationRate').on('input', function(){
    let currentBill = $('#currentBill').val();
    let escalationRate = $(this).val();

    if(!currentBill) return;

    calculateFutureCost(currentBill, escalationRate);
  });

  function calculateFutureCost(currentBill, escalationRate){
    let futureBill5 = currentBill * (1 + escalationRate / 100) ** 5;
    let futureBill10 = currentBill * (1 + escalationRate / 100) ** 10;
    let futureBill15 = currentBill * (1 + escalationRate / 100) ** 15;
    let futureBill20 = currentBill * (1 + escalationRate / 100) ** 20;
    let futureBill25 = currentBill * (1 + escalationRate / 100) ** 25;

    let totalCost5 = futureBill5 * 5;
    let totalCost10 = futureBill10 * 10;
    let totalCost15 = futureBill15 * 15;
    let totalCost20 = futureBill20 * 20;
    let totalCost25 = futureBill25 * 25;

    $('#year_5_bill').text(formatNumber(futureBill5));
    $('#year_10_bill').text(formatNumber(futureBill10));
    $('#year_15_bill').text(formatNumber(futureBill15));
    $('#year_20_bill').text(formatNumber(futureBill20));
    $('#year_25_bill').text(formatNumber(futureBill25));

    $('#year_5_cost').text(formatNumber(totalCost5));
    $('#year_10_cost').text(formatNumber(totalCost10));
    $('#year_15_cost').text(formatNumber(totalCost15));
    $('#year_20_cost').text(formatNumber(totalCost20));
    $('#year_25_cost').text(formatNumber(totalCost25));
  }

  // format number function
  // e.g. 3500 becomes $3,500
  function formatNumber(num){
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num).replace(/\D00$/, '');
  }
});
`

Here is a live link to the page of the site I am working on - www.flareslr.com/calculator

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I think you might have missed a closing </script> tag.
It’s always those little things… :wink:

3

WOW. Can’t believe I wasted so much time trying to figure out what I was doing wrong and never saw that. Thanks!

1 Like