"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.

Your code works. Here's a fiddle to prove it: nothing on JSLint and no exceptions returned -- jsfiddle.net/YahzF — David G
– David G, Commented Oct 14, 2011 at 22:27

Cheery · Accepted Answer · 2012-01-23 07:47:31Z

55

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.

answered Jan 23, 2012 at 7:47

Cheery

16.3k45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wmarbut Over a year ago

Had the same issue and this was my fix

Daniel Wu Over a year ago

I didn't know about this browser behaviour, until just now! I wouldn't need a lot of document.getElementById() if I knew about this.

JLHwung · Accepted Answer · 2012-06-29 05:52:24Z

7

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

answered Jun 29, 2012 at 5:52

JLHwung

1311 silver badge2 bronze badges

Comments

Romain Francois · Accepted Answer · 2012-11-30 17:13:06Z

4

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

edited Nov 30, 2012 at 17:13

Romain Francois

17.7k3 gold badges54 silver badges77 bronze badges

answered Nov 30, 2012 at 16:54

Armand Arapian

2692 silver badges3 bronze badges

1 Comment

Conrad Frix Over a year ago

You might want to take note of Cheery's answer as to why that change matters. You probably had an html tag that had an id of "expand"

Nick Heiner · Accepted Answer · 2011-10-14 21:31:56Z

-4

Perhaps you need commas:

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

answered Oct 14, 2011 at 21:31

Nick Heiner

123k192 gold badges487 silver badges706 bronze badges

2 Comments

David G Over a year ago

He was saying you had a syntax error. Commas separate properties of an object, so keep those commas there.

ted.strauss Over a year ago

why is this marked as the correct answer if the asker says it didn't work?

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related