I am having trouble understanding why this is not working. I have two fields on my form and when I click a button another text field value is changed to that if the function. How can I get this to work?

function calculate()

{

    var odometerStart = parseFloat (document.getElementById('odometerStart').value);

    var odometerEnd = parseFloat(document.getElementById('odometerEnd').value);

    var distance = document.getElementById('distance');

    var amount = document.getElementById('amount');



    distance.value = odometerEnd - odometerStart;       

}



var val = $(#taskentry).validate({

    rules: {

        tripDate: {required: true}

        tripContact: {required: true}

        odometerStart: {required: true}     

    }

});





Odometer: Start <input type=number name=odometer[Start] id=odometerStart min=0 max=999999 placeholder=0 class=required/><br/>

Odometer: End <input type=number name=odometer[End] id=odometerEnd min=0 max=999999 placeholder=999999 class=required/><br/>

Comments <textarea name=comments id=comments rows=2 cols=2></textarea><br/>

Distance <input type=text name=distance id=distance value= placeholder=0.00/><br/>

<input type=button name=calculate value=Calculate onclick=calculate()/>

I am debuging this in Google Chrome using the developer tools and am getting the error uncaught TypeError: Object is not a function at the point where the calculate button is.