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

visible in a function is not working

New Here ,
Sep 30, 2021 Sep 30, 2021

Copy link to clipboard

Copied

I am using Animate 21.0.9 - html canvas

I have an image that I am hiding at the beginning of the timeline using:
        this.nextBtn.visible = false;
This hides the image with no issues.


I have a function that shows it:
function CheckComplete_btn()
  {
   if (ButtonVisited == 1)
       {
           console.log("TrackSequence Code Ran");
           this.nextBtn.visible = true;
        }
      else
     {
          console.log("TrackSequence Code ELSE Ran");
      }
   }

 

When I click the button to run the function, I receive the following error code:

The function is running since I receive my console message, but the visible part is throwing an error.

SCTP12345_0-1633030221541.png


If I take the line this.nextBtn.visible = true; out of the function, it works fine.

Any ideas?

Thanks

Views

180

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

Community Expert , Sep 30, 2021 Sep 30, 2021

Hi.

 

This is a problem of context. The this keyword inside of a function doesn't refer to the current timeline as you're probably expecting.

 

You should store a reference to the current timeline in a variable, bind the the function to the current timeline, or use the currentTarget property of the event object.

 

Variable approach:

var _this = this;

function CheckComplete_btn()
{
	_this.nextBtn.visible = true;
}

 

Bind approach (addEventListener):

this.nextBtn.addEventListener("click", CheckCo
...

Votes

Translate

Translate
Community Expert ,
Sep 30, 2021 Sep 30, 2021

Copy link to clipboard

Copied

Hi.

 

This is a problem of context. The this keyword inside of a function doesn't refer to the current timeline as you're probably expecting.

 

You should store a reference to the current timeline in a variable, bind the the function to the current timeline, or use the currentTarget property of the event object.

 

Variable approach:

var _this = this;

function CheckComplete_btn()
{
	_this.nextBtn.visible = true;
}

 

Bind approach (addEventListener):

this.nextBtn.addEventListener("click", CheckComplete_btn.bind(this));

function CheckComplete_btn()
{
	this.nextBtn.visible = true;
}

 

Bind approach (on):

this.nextBtn.on("click", CheckComplete_btn.bind, this);

function CheckComplete_btn()
{
	this.nextBtn.visible = true;
}

 

You can use the two approaches below if the button that received the event listener is the same one that will be set to be visible.

 

Event.currentTarget (addEventListener):

this.nextBtn.addEventListener("click", CheckComplete_btn);

function CheckComplete_btn(event)
{
	event.currentTarget.visible = true;
}

 

Event.currentTarget (on):

this.nextBtn.on("click", CheckComplete_btn);

function CheckComplete_btn(event)
{
	event.currentTarget.visible = true;
}

 

I hope this helps.

 

Regards,

JC

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
New Here ,
Sep 30, 2021 Sep 30, 2021

Copy link to clipboard

Copied

JC
Thank you for the very quick update. I wish I would have asked this a day and half ago.  🙂

I did the variable option and it worked like a charm.

 

Louis

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
Community Expert ,
Sep 30, 2021 Sep 30, 2021

Copy link to clipboard

Copied

LATEST

Awesome!

 

I'm glad it worked!

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