CODEWITHSUNDEEP
javascriptfunction
user974873
user974873

Reputation: 321

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

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.

Upvotes: 13

Views: 42127

Answers (4)

Armand Arapian
Armand Arapian

Reputation: 267

I had this problem with a function I created, working perfectly with Firefox and giving this error with Chrome and Safari. The solution: change the name of the function. The original name was expand(target), replaced by expand_compress(target). And it worked. I suppose that the function expand() is existing somewhere else than in Firefox

Upvotes: 4

JLHwung
JLHwung

Reputation: 131

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. :)

Upvotes: 7

Cheery
Cheery

Reputation: 16214

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.

Upvotes: 55

Nick Heiner
Nick Heiner

Reputation: 122580

Perhaps you need commas:

var val = $("#taskentry").validate({
    rules: {
        tripDate: {required: true},
        tripContact: {required: true},
        odometerStart: {required: true}     
    }
});

Upvotes: -4

Related Questions