HTML5 Dynamic Text not updating INSIDE of a Function

[shawns45366351]

Hi All,

I'm creating what appears to me to be a simple countdown script. And it's working fine, but my issue is with simply displaying the countdown number on the screen using Dynamic Text.

Before you ask.

• Yes, I have Advanced Layers on.
• Yes, I have reviewed all of the posts in relationship to this issue that I can find, but nothing seems to address what I'm asking below.
• Yes, I have looked at JavaScript forums and I know that I can code this outside of Adobe Animate, but I need to do this from inside of Adobe Animate.
• Yes, there is probably a more elegant way to write a countdown, but that is not my question.
• I am simply looking for learning and understanding on what's going on, this is not for a client or project.

Here is the code, problem areas in red:

var waitingCount = 10; //Initialize counter, starting value

var runCountdown = setInterval(displayProgress, 1000);

console.log(waitingCount + " Seconds Left!"); //works fine
this.countdownNumbers.text = "The Countdown Starts at " + waitingCount; //works fine

function displayProgress()
{
     if(waitingCount>=1) {
         waitingCount -=1; //decrement counter
         console.log(waitingCount + " Seconds Left!"); //works fine
         this.countdownNumbers.text = waitingCount + " Seconds Left!";  //refuses to update and errors
} else {
        alert("DONE!!!");
        clearInterval(anyName); //works fine
        this.countdownNumbers.text = "DONE!!!"; //refuses to update and errors
}
}

Right now the countdown works and in the console it shows it counting down saying "9 Seconds Left!", "8 Seconds Left!", etc. using the waitingCount value just fine in the console.

It also changes the Dynamic text to "The Countdown Starts at 10" (or whatever I define as the length of the countdown in 'waitingCount') without issue and recognizes the value of waitingCount.

EXCEPT that after every interation it has an error:

Uncaught TypeError: Cannot set properties of undefined (setting 'text')
at displayProgress (RECOVER_Simple Random number.js?1643002511274:71:32)

AND that error is the code this.countdownNumbers.text = waitingCount + " Seconds Left!";

When it gets to the end the alert [alert("DONE!!!");] runs fine, however the Dynamic Text will NOT update to 'Done!!!' with this code this.countdownNumbers.text = "DONE!!!"; and also throws up the same error.

So, I do not understand why it recognizes the value 'waitingCount' in the original text OUTSIDE of the funtion OR it recognizes the value 'waitingCount' INSIDE the Alert AND the Console, BUT it DOES NOT recognize the value 'waitingCount', OR the text, when I want to update the Dynamic Text INSIDE of the Function.

This works fine in ActionScript without the 'this' in front of the 'countdownNumber.text':

var waitingCount = 10; //Initialize counter

var runCountdown = setInterval(displayProgress, 1000);

     // console.log(waitingCount + " Seconds Left!");
     countdownNumbers.text = "The Countdown Starts at " + waitingCount;

function displayProgress()
{
     if(waitingCount>=2) {
          waitingCount -=1; //decrement counter
          // console.log(waitingCount + " Seconds Left!");
          countdownNumbers.text = waitingCount + " Seconds Left!";
     } else {
          // alert("DONE!!!" + waitingCount);
          // clearInterval(anyName);
          countdownNumbers.text = "DONE!!!";
}
}

Thank you for any help. 

[JoãoCésar · Accepted solution]

Hi.

It's a context problem.

When you use the this keyword inside of a function, it by default won't refer to the current timeline if you don't use the bind method.

That being said, you can solve the problem in at least two ways:

Using bind:

var runCountdown = setInterval(displayProgress.bind(this), 1000);

Saving the context before hand:

var _this = this;

// ...

function displayProgress()
{
	if (waitingCount >= 1)
	{
		// ...
		_this.countdownNumbers.text = waitingCount + " Seconds Left!"; //refuses to update and errors
	}
	else
	{
		// ...
		_this.countdownNumbers.text = "DONE!!!"; //refuses to update and errors
	}
}

I hope it helps.

Regards,

JC

[shawns45366351]

OMG! THANK YOU!!!!

[JoãoCésar]

You're welcome!!!