"uncaught TypeError: Object is not a function" in JavaScript

Question

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.

Answer 1

Sorry for the huge gap between your question and my answer :) I just got the same problem and found the reason - browser automatically populates objects based on ID attributes of the html tags in the page. Simple test

<div id='test'>Just testing</div>
<script type='text/javascript'>
alert(test.innerHTML);
</script> 

In your case you had an element with id='calculate', rename it or rename the function you are using for calculations.

Answer 2

In my case, I have

<input type="button" class="button" id="register" title="register" value="Sign Up!" onclick="register()" />

and get the same warning when I call the javascript function register(), I guess it is conflicted with id or title attributes in the input tag, so I just alter this function into another name such as signup() and it works around.

I hope it helps. :)