Texts rendering over each other

[Zeephaser]

 

the texts created in the ridFactory()  and  valInput() functions   don't update but is rendered on top of the previous ones, I don't know what's wrong. Please help 

 

create:function(){
this.input=this.game.add.inputField(10,200,{
    font: '18px Arial',
    fill: '#212121',
    fontWeight: 'bold',
    width: 150,
    padding: 8,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 6,
    cursorColor: 'red'
    
    
});
//parse and add json file to cache    
this.riddles=this.game.cache.getJSON("riddles");

//assign array in json files to rArray
this.rArray=this.riddles.rArr;
    
this.game.stage.backgroundColor="#ff3399";
//create riddles here
this.ridFactory();
    
this.valButton=this.game.add.button(this.game.world.width*0.5,this.game.world.height*0.5,'button',this.validateInput,this);
this.valButton.anchor.setTo(0.5);    
//this.cursors=this.game.input.keyboard.createCursorKeys();
},

update:function(){
   
},

ridFactory:function(){
//var for holding current riddle
this.currRid=Phaser.ArrayUtils.removeRandomItem(this.rArray);

this.style={font:"40px Arial",fill:"#fff",align:"center"};
this.ridText=this.game.add.text(0,0,this.currRid.riddle,this.style);

 
    },
    
validateInput:function(){
    var gameMessage="";
    if(this.input.value==''){
      this.gameMessage = this.game.add.text(0,400,"input text",this.style);  
    }
    else{
    if(this.input.value!==this.currRid.answer){
       this.gameMessage = this.game.add.text(this.game.world.width*0,this.game.world.height*0.75,"you are wrong",this.style);
        this.ridFactory();
    }
    else{
       this.gameMessage = this.game.add.text(this.game.world.width*0,this.game.world.height*0.75,"you are correct",this.style);
    }    
        this.ridFactory();
        }
}    
    
    
};

game.state.add("main",mainState);
game.state.start("main");

 

Edited November 29, 2016 by Zeephaser
put code before description of the problem

[XekeDeath]

This is because you are creating new texts every time...

They are not replacing the old ones, they are brand new objects, added to the stage on top of the old objects...

You want to use this.game.add.text once, save the reference, then set the text value each time you want it to change...

create:function()
{
    // Your code
    this.gameMessage = this.game.add.text(this.game.world.width*0,this.game.world.height*0.75,"input text",this.style);
}
validateInput:function()
{
    if(this.input.value=='')
    {
        this.gameMessage.text = "input text";
    }
    else
    {
        if (this.input.value !== this.currRid.answer)
        {
            this.gameMessage.text = "you are wrong";
            this.ridFactory();
        }
        else
        {
            this.gameMessage.text = "you are correct";
        }
        this.ridFactory();
    }
}
	

[Zeephaser]

Thanks very much, it works perfectly