why the value is undefine if there are in the same class ?

Question

Im just trying to put a chronometer in html , but in the first 'if' of the method cronometro() the value of this.centesimas is undefine, and I really dont understand why because I declared these vars at the constructor of the class.

class NotaView {
  constructor () {
    this.centesimas = 0;
    this.segundos = 0;
    this.minutos = 0;
 }
  startCronometro() {
    this.control = setInterval(this.cronometro,10);


}

 cronometro () {

     this.Centesimas = document.getElementById("Centesimas");
     this.Segundos = document.getElementById("Segundos");
     this.Minutos = document.getElementById("Minutos");

     if (parseInt(this.centesimas) < 99) {
         parseInt(this.centesimas++);
        if (parseInt(this.centesimas) < 10) { this.centesimas = "0" + parseInt(this.centesimas) }
        this.Centesimas.innerHTML = ":" + parseInt(this.centesimas);
        console.log(this.centesimas)
    }
    if (parseInt(this.centesimas) == 99) {
        this.centesimas = -1;
    }
    if (parseInt(this.centesimas) == 0) {
        parseInt(this.segundos ++);
        if (parseInt(this.segundos) < 10) { this.segundos = "0" + parseInt(this.segundos )}
        this.Segundos.innerHTML = ":" + parseInt(this.segundos);
    }
    if (parseInt(this.segundos) == 59) {
        this.segundos = -1;
    }
    if ( (parseInt(this.centesimas) == 0)&&((this.segundos) == 0) ) {
        parseInt(this.minutos++);
        if (parseInt(this.minutos) < 10) { this.minutos = "0" + parseInt(this.minutos )}
        this.Minutos.innerHTML = ":" + parseInt(this.minutos);
    }

Possible duplicate of [setTimeout and "this" in JavaScript](https://stackoverflow.com/questions/591269/settimeout-and-this-in-javascript) — Andreas, Nov 21 '17 at 18:13
Have you seen that you are using `this.centesimas` in `constuctor()` vs `this.Centesimas` in `cronometro ()`. it could be the cappital letter 'C' the problem. — Jorge Omar Medra, Nov 21 '17 at 19:22
I know that are diferent , this.centesimas has the 0 value , and this.Centesimas is just a
inside html where i want to show it — Jesús Estévez, Nov 21 '17 at 20:00

Nicholas Tower · Accepted Answer · 2017-11-21T18:21:51.363

The value of this is not determined when a function is created, it's determined by how the function is invoked. You're invoking the function directly as the callback of setInterval. This ends up invoking chronometro with this as the global object (or in strict mode this is undefined).

There are few options to fix this. If you can use Ecmascript 2015, i'd recommend creating an arrow function and calling this.cronometro inside it:

startCronometro() {
  this.control = setInterval(() => this.cronometro(), 10);
}

If you can't use ES2015, you can also use a regular function, but you'll need to manually save the value of this:

startCronometro() {
  var self = this;
  this.control = setInterval(function () {
    self.cronometro();
  }, 10);
}

Or you can create a bound version of the cronometro function:

startCronometro() {
  this.control = setInterval(this.cronometro.bind(this),10);
}

thanks that was a good solution , but now I have the next problem. When I instace the first object of NotaView the chronometer work well , but when when I instance the second object for have a result 2 different chronometes at the same time , just work on the first object and the second object just stay as 00:00:00 all the time. Any suggest able to have 2 different chronometes at the same time working ? sorry for my bad english :( — Jesús Estévez, Nov 21 '17 at 18:31

why the value is undefine if there are in the same class ?

1 Answers1