CODEWITHSUNDEEP
javascript
punkish
punkish

Reputation: 15268

updated a div inside a while loop

I have a class like so

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.oldEnough = 30;
    }

    celebrate(div) {
        let currentAge = 0;

        while(!this.isOldEnough(currentAge)) {
            const timer = setInterval(() => {
                currentAge = currentAge + 1;
                div.innerHTML = `age is ${count} years old`;
            }, 100);
        }

        div.innerHTML = `Happy birthday ${this.name}!`;


        //clearInterval(timer);
    }

    isOldEnough(age) {
        return age === this.oldEnough;
    }
}

const jc = new Person('John', 0);
jc.celebrate(document.querySelector('#greeting'));

Of course, the div is not updated while the while loop which is why I am here. What am I doing wrong?

Upvotes: 2

Views: 78

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122087

If you want to use while loop you could use generator inside try...finally block and call the iterator with setInterval

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.oldEnough = 30;
  }

  celebrate(div) {
    let self = this;

    function* count() {
      try {
        while (!self.isOldEnough()) {
          yield div.innerHTML = `age is ${self.age++} years old`;
        }
      } finally {
        div.innerHTML = `Happy birthday ${self.name}!`;
        clearInterval(timer);
      }
    }

    let it = count();
    let timer = setInterval(() => it.next(), 100)
  }

  isOldEnough() {
    return this.age === this.oldEnough;
  }
}

const jc = new Person('John', 0);
jc.celebrate(document.querySelector('#greeting'));
<div id="greeting"></div>

Upvotes: 2

Katie.Sun
Katie.Sun

Reputation: 711

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.oldEnough = 30;
    }

    celebrate(div) {   
            const timer = setInterval(() => {
                if(!this.isOldEnough(this.age)){
                    this.age++;
                    console.log(this.name + ' is ' + this.age + ' years old ')
                }
                else{
                    clearInterval(timer);
                }
            }, 100);

        console.log('Happy birthday ' + this.name)
    }

    isOldEnough(age) {
        return age === this.oldEnough;
    }
}

I think that's what you're after. Your constructor wasn't working because the proper syntax is constructor(...), and you should just try to take advantage of the fact that .setInterval() takes a function as its first parameter. If you have other conditions that must change according to whether the person 'is old enough', you can likely just put them in the if statement's {}.

Anyway, hope this helps.

Upvotes: 0

Vivek
Vivek

Reputation: 1525

There is no need to use while loop, using only interval you can achieve this

celebrate(div) {
  let currentAge = 0;


  const timer = setInterval(() => {
      currentAge = currentAge + 1;
      if (this.isOldEnough(currentAge)) {
          clearInterval(timer);
      }
      div.innerHTML = `age is ${count} years old`;
  }, 100);


  div.innerHTML = `Happy birthday ${this.name}!`;


  //clearInterval(timer);
}
isOldEnough(age) {
  return age === this.oldEnough;
}

Upvotes: 0

Related Questions