How to Write a JavaScript Function That Computes a Taxi Fare

By Allen Bethea

Updated April 06, 2018

Taxis are a convenient, but costly way to travel.
i Thinkstock Images/Comstock/Getty Images

Taxis are a convenient but expensive way to travel. Once the cab starts to move, the meter starts running and the charges begin to pile up. If you know the rates the cab company charges and the approximate distance to your destination, you can create your own taxi fare estimator using JavaScript. If the taxi charge is based upon every fifth mile, multiply your trip mileage by five. Then multiply the result by the rate per fifth mile. Finally, add this amount to the initial drop-off charge that some companies charge regardless of the distance traveled.

Launch the plain-text editor Notepad by clicking the "Start" button, "All Programs," "Accessories," then "Notepad."

Enter the following code into the text editor:

<html> <head> <script type="text/javascript"> function calculatefare() { // variable declarations var subTotal=0.0; var pricePerFifthMile=0.50; var dropOffCharge=2.50; var overTwoPassengerCharge=2.00; var tripDistance=Number(document.getElementById("distance").value); var passengers=Number(document.getElementById("passengers").value); // if there are over 2 riders, each additional passenger pays $2 if (passengers>2) { subTotal=overTwoPassengerCharge(passengers-2); } // calculate the price based on miles in subTotal+=parseInt(tripDistance5)*pricePerFifthMile; subTotal+=dropOffCharge; // prints the price to the div. toFixed adds cents to integer calculations document.getElementById('price').innerHTML=" $"+subTotal.toFixed(2); } </script> </head> <body> <h1>Calculate Cab Fare</h1> <table><tr><td> Distance to travel (Miles): <br> Number of passengers : <br> <button id="first" type="button" onClick="javascript:calculatefare()">Calculate Fare:</button> </td> <td> <input id="distance" type="text" name="distance" value="1" /><br> <input id="passengers" type="text" name="passengers" value="1" /><br> <div id="price" > $00.00</div> </td></tr> </table> </body> </html>

Click the "File" menu. Select the "Save" option. Save it under the file name "test.html."

Launch the Web browser by clicking the "Start" button, clicking on "All Programs" and "Internet Explorer." Click on the "File" menu item and select "Open File."

Locate the file "test.html" just created, select it with the mouse, then click on "Open."

Enter the distance to your destination in miles. Enter the number of people riding with you. In this example, if there are more than two people riding, each additional person must pay $2 to ride. Click on the button labeled "Calculate Fare." The estimate should appear to the right of the button.


You can increase the usefulness of your script by using free, online mapping services. When you provide the site with the start and destination addresses, an application calculates the distance. Sometimes, mapping services offer alternative routes that may differ in distance and travel time . The search engines Bing and Google, along with MapQuest and OpenStreetMap, provide programming interfaces to their services so that you can incorporated route distance calculations into your application.


HTML form elements return data as strings rather than numbers. It is up to you to make sure that values taken from the input boxes are the correct data type to use in your calculations. The JavaScript function Number() converts string values into numbers, if it is possible. For example, if you enter a "9," Number() converts it to the number 9. If you enter "nine," Number() will return "NaN" or "Not a Number."

Items you will need

  • Web browser such as Internet Explorer

  • Plain-text editor like Notepad