Modifying the parameter of a looped function in Javascript

Question

I'm having issues with getting this JSFiddle to work:

http://jsfiddle.net/y45jN/

var mainFunction = function() {
  this.text;
}

mainFunction.prototype.start = function(printText) {

  this.text = printText;

  var func = function() {
    document.getElementById('test').innerHTML += this.text + '<br/>';
  };

  setInterval(func,1000);

}

mainFunction.prototype.updateText = function(printText) {

  this.text = printText;

}

var test = new mainFunction();
test.start('hello');

setTimeout(function(){
  test.updateText('bye');
},5000);

What I want to do is for the first 5 seconds print hello and after 5 seconds print bye.

I'm unsure on how I can make the function (func) know that the this.text parameter of the class has changed.

Answer 1

You've messed up the context here. Cache this in some variable and use it inside an interval (or use bind ):

    this.text = printText;
    var self = this;

    var func = function() {
        document.getElementById('test').innerHTML += self.text + '<br/>';
    };

Then, simply modify the instance's property text :

setTimeout(function(){
    test.text = 'bye';
},5000);

Fiddle

Answer 2

Solution using bind method:

setInterval(func.bind(this),1000);

http://jsfiddle.net/y45jN/5/