Simple Javascript Mileage Calculator

I was tutoring some high schoolers today (not a regular gig, was an accident) on javascript and ended up spending a quick 20 minute lunch break on doing their assignment. Here is a very simple example of a Mileage Calculator using Javascript and the Document Object Model (DOM). See it in action here.

<!DOCTYPE html>
        <style type="text/css">
            h2 {
        <meta charset=utf-8 />
        <title>Simple Javascript Mileage Calculator</title>
            function calculateMpg() {
                // variables
                var milesDriven = document.getElementById("miles_driven").value;
                var gallonsUsed = document.getElementById("gallons_used").value;
                var pricePerGallon = document.getElementById("price_per_gallon").value;
                // input validation
                if (milesDriven <= 0 || gallonsUsed <= 0 || pricePerGallon <= 0) {

                    alert("Please enter a value higher than 0!");
                } else {

                    var mpgCost = milesDriven / gallonsUsed;

                    var costOfTrip = pricePerGallon * gallonsUsed;
                // if "undefined" set to 0
                if (mpgCost === undefined || costOfTrip === undefined) {
                    mpgCost = 0;
                    costOfTrip = 0;
                // parse and format the output
                var pmpg = parseFloat(mpgCost).toFixed(2);
                document.getElementById("your_mpg").innerText = pmpg;

                var pcot = parseFloat(costOfTrip).toFixed(2);
                var output = "$" + pcot;
                document.getElementById("cost_of_trip").innerText = output;

            // function to reset the form and fields 
            function formReset() {
                document.getElementById("your_mpg").innerText = 0;
                document.getElementById("cost_of_trip").innerText = 0;

            // initialize
            function init() {
                document.getElementById("calculate").onclick = calculateMpg;

            window.onload = init;
         <h1 id="header">Calculate your MPG</h1>

         <h4 id="subheader">Enter the information below to see if you are getting good mileage!</h4>

        <form id="mileage_form">
            <label for="miles_driven">Miles Driven:</label>
            <input type="text" name="miles_driven" id="miles_driven">
            <br />
            <br />
            <label for="gallons_used">Gallons of Gas Used:</label>
            <input type="text" name="gallons_used" id="gallons_used">
            <br />
            <br />
            <label for="price_per_gallon">Price per gallon:</label>
            <input type="text" name="price_per_gallon" id="price_per_gallon">
            <br />
            <br />
            <input type="button" value="Calculate the MPG and Cost of the Trip" id="calculate"></input>
            <br />
            <br />
            <input type="button" value="Clear form" onclick="formReset()"></input>
            <br />
            <br />
             <h3>Your MPG:</h3> 
             <h2 id="your_mpg"></h2>

             <h3>The Cost of the Trip is: </h3>

             <h2 id="cost_of_trip"></h2>


Tags: ,

  1. Doesn’t seem to be working here in Firefox (from the action link, no calculation is made).


    1. Beck-

      Try Chrome. Works just fine. I don’t use Firefox, so I cannot confirm if it works or not.



Leave a comment..

This site uses Akismet to reduce spam. Learn how your comment data is processed.