Getting a TypeError (not a function) Jquery/Javascript

Question

I'm trying to make a super simple "see more.." link. I was doing it before with a button, but it didn't work very well on mobile, so I've changed it to a link, but I'm getting this error: jquery-3.1.1.min.js:2 jQuery.Deferred exception: seeMore is not a function TypeError: seeMore is not a function

Here's the code. I reckon it's just a stupid syntax error somewhere.

$(document).ready(function(){
    var seeMore = document.getElementById('seeMore');

    seeMore.onclick=seeMore();

    function seeMore(){
        document.getElementById('infoText').innerHTML= 'More text';
    };

    function seeLess(){
        document.getElementById('infoText').innerHTML= 'Less text';
    };
});

and here's the linked seeMore ID.

<a href="#" id="seeMore">See More</a>

What's going on here??

Name conflict. You used the same name for a variable and function. — kind user
– kind user, Commented Jul 4, 2017 at 10:54
Plus you need to assign the function itself after renaming seeMoreEl.onclick=seeMore not seeMoreEl.onclick=seeMore() — Yury Tarabanko
– Yury Tarabanko, Commented Jul 4, 2017 at 10:55
Also, to assign a function as a handler, do not use braces beause doing so will execute the method instead of treating it as an object. Here is how to do it: seeMore.onclick=myFunction; — Peter B
– Peter B, Commented Jul 4, 2017 at 10:56

NtFreX · Accepted Answer · 2017-07-04 10:55:51Z

1

You use the same name for a property and a function and therefore its not clear what you mean.

You could rename one variable.

Also when you assign seeMore() with the brackets you assign the return value of the function and not the function itself. You need to remove the brackets.

You could also use the events which jquery provide to easily support all browsers.

$(document).ready(function(){
    var seeMoreElement = document.getElementById('seeMore');

    function seeMore(){
        document.getElementById('infoText').innerHTML= 'More text';
    };

    function seeLess(){
        document.getElementById('infoText').innerHTML= 'Less text';
    };

    $(seeMoreElement).click(seeMore);
});

edited Jul 4, 2017 at 10:55

answered Jul 4, 2017 at 10:55

NtFreX

11.5k3 gold badges47 silver badges67 bronze badges

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

1 Comment

Cal Courtney Over a year ago

Thanks man! I've been looking at this code for far too long. Although, it's still not working very well on mobile. I'll work it out

Collectives™ on Stack Overflow

Getting a TypeError (not a function) Jquery/Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related