• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animate beginners javascript function issue

Explorer ,
Mar 31, 2017 Mar 31, 2017

Copy link to clipboard

Copied

Hi – I've just started with playing around with javascript in Animate (not sure it's even the right software for the animation I want to do yet!), but am having a beginners' issue with getting functions to run. I've adapted some of the code from this tutorial.

When I use this code in the first keyframe to change the text on a Dynamic Text box called 'yearText' it works fine:

var currentYear = 2017;

var year = 1971;

this.yearText.text = year;

this.playBtn.addEventListener("click", playClicked.bind(this));

function playClicked() {

    this.play();

    isPlaying = true;

    year = year + 1;

    this.yearText.text = year;

}

But then if I put a function inside the function in place of the last two lines like this, it no longer works:

this.playBtn.addEventListener("click", playClicked.bind(this));

function playClicked() {

    this.play();

    isPlaying = true;

    year = year + 1;

    this.yearText.text = year;

}

function yearIncrease() {

        year = year + 1;

        this.yearText.text = year;

    }

Have I completely misunderstood something about how functions work?

Any help very much appreciated! Then i can see if Animate is something I'll be able to use properly...

Views

1.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 31, 2017 Mar 31, 2017

I thnk you misquoted yourself, and didn't have yearIncrease() in the later function.

That aside, the bind(this) part makes the first function use the 'this' value from the main timeline, and in going to another level of function you've lost track of 'this'.

An easy solution is to have a variable pointing to the field. This works:

var currentYear = 2017;

var year = 1971;

var yearTextField = this.yearText;

yearTextField.text = year;

this.playBtn.addEventListener("click", playClicked.bind(this));

function

...

Votes

Translate

Translate
LEGEND ,
Mar 31, 2017 Mar 31, 2017

Copy link to clipboard

Copied

I thnk you misquoted yourself, and didn't have yearIncrease() in the later function.

That aside, the bind(this) part makes the first function use the 'this' value from the main timeline, and in going to another level of function you've lost track of 'this'.

An easy solution is to have a variable pointing to the field. This works:

var currentYear = 2017;

var year = 1971;

var yearTextField = this.yearText;

yearTextField.text = year;

this.playBtn.addEventListener("click", playClicked.bind(this));

function playClicked() {

  this.play();

  isPlaying = true;

  yearIncrease();

}

function yearIncrease() {

  year = year + 1;

  yearTextField.text = year;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 31, 2017 Mar 31, 2017

Copy link to clipboard

Copied

So helpful – hadn't got my head round defining text boxes as variables!

thanks very much...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 31, 2017 Mar 31, 2017

Copy link to clipboard

Copied

LATEST

and yes I did misquote myself, so even more well spotted...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines