Is not a function error - JavaScript es6 class structure

Question

having issue - is not function error, with my code, here it is:

import $ from 'jquery';
import gsap from 'greensock';

class IntroAnimations{
 constructor(){
    this.ctaEnter         = $('#cta-enter');
    this.loadContent      = $('.center-h-v');
    this.tlLoading        = new TimelineLite();
    this.animationTime    = .5;

    this.ctaEnter.click(function(){
        this.removeLoadContent(); //<- error is here
    })
 }
removeLoadContent(){
    TweenLite.to(this.loadContent, this.animationTime, {autoAlpha: 0})
 }
}

export default IntroAnimations;

Error is when I call this.removeLoadContent(); Can someone help me explain why this is causing an error?

Thank you.

score 1 · Answer 1 · answered Sep 13 '17 at 16:56

1

this.ctaEnter.click(() => {
    this.removeLoadContent(); //<- error was here
})

answered Sep 13 '17 at 16:56

Jonas Wilms

132,000
20
149
151

This worked but how and why? – Harp Sep 13 '17 at 16:59
@harp you should probably read more about javascripts context... – Jonas Wilms Sep 13 '17 at 17:00

score 0 · Answer 2 · answered Sep 13 '17 at 16:55

0

This is because "this" has different context.

Write your function using the fat arrow and it should works.

removeLoadContent = ()=>{
    TweenLite.to(this.loadContent, this.animationTime, {autoAlpha: 0})
 }

answered Sep 13 '17 at 16:55

proti

213
3
11

Is not a function error - JavaScript es6 class structure

2 Answers2