www.webdeveloper.com
Results 1 to 2 of 2

Thread: Basic miles per gallon ccalculator

  1. #1
    Join Date
    Feb 2012
    Posts
    4

    Question Basic miles per gallon ccalculator

    Having trouble with this code. I used to get the answer to come through with an alert message. Then I altered some of the validation and now I can no longer return the miles per gallon. I'm not sure if I'm sending the variable to the validation function correctly either. I would like to assign the value to the last text box in the form if possible. Any hints or suggestions? Thanks Chris.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Gas Mileage</title>
    <style type="text/css">
    body
    {
    background-image:url(brushed-silver-metallic-background.jpg);
    background-repeat: space;
    font:'cursive';
    font-size:36px;
    color:#C43D1E;
    font-weight:bold;
    }
    form
    {
    border-style:solid;
    border:medium;
    border-color:#87E1F4;
    float:left;
    padding:250px;
    height:300px;
    background-image:url(gas-mileage.jpg);
    /*opacity:.5;*/
    background-repeat:no-repeat;
    background-position:center;
    }
    input
    {
    border-style:solid;
    border:#27DFD5;
    border-width:medium;
    background:#000;
    font:'arail';
    color:#FFF;
    }
    input:hover
    {
    border-style:solid;
    border-width:medium;
    border:#F00;
    background:#FFF;
    border-color:#f00;
    color:#F00;
    }
    button
    {
    font-size:26px;
    border-style:solid;
    border:#27DFD5;
    border-width:medium;
    background:#000;
    font:'arail';
    color:#FFF;
    }
    button:hover
    {
    font-size:26px;
    border-style:solid;
    border:#F00;
    border-width:medium;
    background:#FFF;
    border-color:#f00;
    color:#F00;
    }
    p
    {
    border-style:solid;
    border:medium;
    border-color:#87E1F4;
    float:left;
    padding:250px;
    height:300px;
    background-image:url(gas-mileage.jpg);
    /*opacity:.5;*/
    background-repeat:no-repeat;
    background-position:center;
    }

    </style>
    <script type="text/javascript">
    //clear the text values
    function clearIt(a)
    {

    if (a==1)
    {
    if (document.getElementById("starting").value == "ENTER INFO")
    {
    document.getElementById("starting").value="";
    document.getElementById("starting").value="";
    }
    }
    else if (a==2)
    {

    if (document.getElementById("ending").value == "ENTER INFO")
    {
    document.getElementById("ending").value="";
    }
    }
    else
    {
    if (document.getElementById("gas_used").value == "ENTER INFO")
    {
    document.getElementById("gas_used").value="";
    }

    }
    }

    function calcMpg()
    {
    window.alert("calculating your mles per gallon")
    var starting_mileage = document.getElementById("starting").value;

    var ending_mileage = document.getElementById("ending").value;
    var gallons = document.getElementById("gas_used").value;
    var valid = isNumber(starting_mileage, ending_mileage, gallons);
    if (valid == false)
    {
    alert("please enter only number values into the form")
    exit;
    }
    if (gallon < 0 || ending_mileage - starting_mileage < 0)
    {
    alert("you must have travelled a positive number of miles and used gas to calculate this value")
    exit;
    }
    var total_gas = (ending_mileage - starting_mileage)/gallons;
    alert(total_gas);
    document.getElementById("mpg").value = total_gas;

    function isNumber(x, y , z)
    {
    if(x == Nan())
    return false;
    if(y == Nan())
    return false;
    if(z==Nan())
    return false;
    else
    return true;
    }

    }
    </script>

    </head>

    <body>
    <br />
    <form name="gas_form" id="gas_form">
    <label>
    Enter your staring mileage here:
    <input type="text" id="starting" name="starting" value="ENTER INFO" max="10" onfocus="clearIt(1)" />
    </label>
    <br />
    <label>
    Enter your ending mileage here:
    <input type="text" id="ending" name="ending" value="ENTER INFO" max="10" onfocus="clearIt(2)" />
    </label>
    <br />
    <label>
    Enter your gallons of gas used here:
    <input type="text" id="gas_used" name="gas_used" value="ENTER INFO" max="3" onfocus="clearIt(3)" />
    </label>
    <br />
    <hr />
    <div align="center">CLICK HERE &nbsp;<button onclick="calcMpg()" >GO!</button>
    </div>
    <label>
    The miles per gallon for your vehicle this trip is:
    <br />
    <input type="text" id="mpg" name="mpg" />
    </label>
    </p>
    </label>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    There are a handful of little things wrong. I have corrected and made comments.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Gas Mileage</title>
        <style type="text/css">
            body {
                background-image: url(brushed-silver-metallic-background.jpg);
                background-repeat: space;
                font: 'cursive';
                font-size: 36px;
                color: #C43D1E;
                font-weight: bold;
            }
    
            form {
                border-style: solid;
                border: medium;
                border-color: #87E1F4;
                float: left;
                padding: 250px;
                height: 300px;
                background-image: url(gas-mileage.jpg);
                /*opacity:.5;*/
                background-repeat: no-repeat;
                background-position: center;
            }
    
            input {
                border-style: solid;
                border: #27DFD5;
                border-width: medium;
                background: #000;
                font: 'arail';
                color: #FFF;
            }
    
            input:hover {
                border-style: solid;
                border-width: medium;
                border: #F00;
                background: #FFF;
                border-color: #f00;
                color: #F00;
            }
    
            button {
                font-size: 26px;
                border-style: solid;
                border: #27DFD5;
                border-width: medium;
                background: #000;
                font: 'arail';
                color: #FFF;
            }
    
            button:hover {
                font-size: 26px;
                border-style: solid;
                border: #F00;
                border-width: medium;
                background: #FFF;
                border-color: #f00;
                color: #F00;
            }
    
            p {
                border-style: solid;
                border: medium;
                border-color: #87E1F4;
                float: left;
                padding: 250px;
                height: 300px;
                background-image: url(gas-mileage.jpg);
                /*opacity:.5;*/
                background-repeat: no-repeat;
                background-position: center;
            }
    
        </style>
        <script type="text/javascript">
            //clear the text values
            function clearIt(a) {
                //Really, this while function could be redone to be more efficient but it works so oh well.
                if (a == 1) {
                 if (document.getElementById("starting").value == "ENTER INFO") {
                 document.getElementById("starting").value = "";
                 document.getElementById("starting").value = "";
                 }
                 }
                 else if (a == 2) {
    
                 if (document.getElementById("ending").value == "ENTER INFO") {
                 document.getElementById("ending").value = "";
                 }
                 }
                 else {
                 if (document.getElementById("gas_used").value == "ENTER INFO") {
                 document.getElementById("gas_used").value = "";
                 }
    
                 }
            }
    
            function calcMpg() {
                //There was no semicolon at the end of this line.  Always make sure to end your lines.
                window.alert("calculating your mles per gallon");
                var starting_mileage = document.getElementById("starting").value;
    
                var ending_mileage = document.getElementById("ending").value;
                //This --v-- has an 's' on the end...
                var gallons = document.getElementById("gas_used").value;
                var valid = isNumber(starting_mileage, ending_mileage, gallons);
                if (valid == false) {
                    alert("please enter only number values into the form");// Also didnt have semicolon.
                    exit;
                }
                //This--v-- did not have an 's' on the end.
                if (gallons < 0 || ending_mileage - starting_mileage < 0) {
                    alert("you must have travelled a positive number of miles and used gas to calculate this value");// Also didnt have semicolon.
                    exit;
                }
                var total_gas = (ending_mileage - starting_mileage) / gallons;
                alert(total_gas);
                document.getElementById("mpg").value = total_gas;
    
                //You were missing this closing bracket. So....
    
            }
    
            //...this function was inside the other.
            function isNumber(x, y, z) {
                //You had some not needed things in here.
                //This was is more simple, plus Nan() isn't a function.
                var regex = /[^0-9*$]/;
    
                if (regex.test(x) && regex.test(y) && regex.test(z)){
                    result = false;
                }else{
                    result = true;
                }
                //Try to keep your functions limited to one return point.
                return result;
    
            }
    
    
        </script>
    
    </head>
    
    <body>
    <br/>
    <!--I would remove the form tag.  It isn't needed and causes reload that isn't needed.-->
    <!--<form name="gas_form" id="gas_form">-->
    <label>
        Enter your staring mileage here:
        <input type="text" id="starting" name="starting" value="ENTER INFO" max="10" onfocus="clearIt(1)"/>
    </label>
    <br/>
    <label>
        Enter your ending mileage here:
        <input type="text" id="ending" name="ending" value="ENTER INFO" max="10" onfocus="clearIt(2)"/>
    </label>
    <br/>
    <label>
        Enter your gallons of gas used here:
        <input type="text" id="gas_used" name="gas_used" value="ENTER INFO" max="3" onfocus="clearIt(3)"/>
    </label>
    <br/>
    <hr/>
    <div align="center">CLICK HERE &nbsp;
        <button onclick="calcMpg()">GO!</button>
    </div>
    <label>
        The miles per gallon for your vehicle this trip is:
        <br/>
        <input type="text" id="mpg" name="mpg"/>
    </label>
    </p>
    </label>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles