0

I am making a timer. I have a variable which holds the value of seconds. If I use onclick() to manually minus one from the variable, it works. However, when I run the function through setInterval, it returns NaN.

I have tried adding a '+' before the variable when changing the value, and also tried the Number() function, but to no avail.

    export class CountdownPage implements OnInit {

  countdown: any;
  tabata: any;
  id: any;
  set: any;
  currentSet: any;
  setTest: any;
  phaseCountdown: any;
  currentPhase: any;
  phaseWork: any;
  phaseRest: any;
  phaseEnd: any;
  intervalOne: any;
  authState$: Observable<boolean>;


  constructor(private Auth: AuthService, public http: HttpClient, private 
router: Router, private route: ActivatedRoute) {

  this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
    this.countdown = 
this.router.getCurrentNavigation().extras.state.tabataData[0].substring(17, 19);
    this.tabata = this.router.getCurrentNavigation().extras.state.tabataData[1];
    this.id = this.router.getCurrentNavigation().extras.state.tabataData[2];


            console.log(this.countdown);
        }
    });
 }

  repeat() {
      this.intervalOne = setInterval(this.begin, 1000);
  }

  begin() {
     let first = document.querySelector('#counter');
     this.countdown = this.countdown - 1;
     Number(this.countdown);
first.innerText = this.countdown;
console.log(this.countdown);

}

For info: this.countdown variable is passed through from a service (I'm using Ionic AngularJS).

I am simply after a number stored in a variable that goes down one in value, every second.

Thanks.

jesusWalks
  • 355
  • 4
  • 16
  • 3
    i suspect this.countdown was already NaN before any of the above code altered it. (provide code and/or logs that would prove otherwise) – Kevin B Aug 19 '19 at 20:11
  • 1
    @KevinB that was my first reaction too, but then I realised from the syntax that this must be inside an ES6 class, which sadly we're not shown all the relevant parts of. I'm assuming there is indeed a `countdown` attribute which is set somewhere (I guess in the constructor), in which case the problem is just the relatively common one which is addressed in the duplicate. [Obviously if we could see more code we would know for sure...] – Robin Zigmond Aug 19 '19 at 20:22
  • Code updated. When I console.log() this.countdown, it appears as a number, no "around the digits" to say it is a string. But any advice to help me correct this problem will be heeded. – jesusWalks Aug 19 '19 at 20:37
  • I used typeof in the console.log console.log(this.countdown) within constructor says string. Yet, console.log(this.countdown) within the begin function, says number! – jesusWalks Aug 19 '19 at 20:49
  • 1
    @JamesRossCodes I'm far from sure what this code is doing - especially as it appears to be TypeScript, which I've never used, rather than straight JS. However I strongly suspect that your problem will be solved by replacing `this.intervalOne = setInterval(this.begin, 1000)` with `this.intervalOne = setInterval(() => this.begin(), 1000)`, as you will find suggested in the duplicate question. – Robin Zigmond Aug 19 '19 at 21:27
  • @RobinZigmond Thank you, Robin. Your solution works. I don't fully understand how/why, so am going to read once again the link supplied above. Thank you. – jesusWalks Aug 20 '19 at 11:57

0 Answers0