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

80

Likes

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

Adobe Community Professional , 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...

Likes

Translate

Translate
Adobe Community Professional ,
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

Likes

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

Likes

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

Copy link to clipboard

Copied

LATEST

Awesome!

 

I'm glad it worked!

Likes

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