CODEWITHSUNDEEP
javascripteaseljscreatejs
Hello-World
Hello-World

Reputation: 9555

EaselJS update text object dynamically with onClick

In the code below when I click on the circle its meant to update the text property of txt using txt.Text = "gffdfgdsgsdgsdg"; But it wont work? Do you know how todo this?

function init() {

    var canvas = document.getElementById('easel');
    var stage = new createjs.Stage(canvas);

    var circle = new createjs.Shape();
    circle.graphics.beginFill("rgba(255,255,255,1)").drawCircle(40, 40, 40);

    var shape = new createjs.Shape();
    shape.graphics.s('red').ss(10, 'round', 'round').mt(50, 50).lt(250, 250).lt(50, 250).cp();

    var shape2 = new createjs.Shape();
    shape2.graphics.s('blue').ss(20, 'round', 'round').mt(200, 50).lt(250, 250).lt(50, 250).cp();

    var txt = new createjs.Text("Hello CreateJS!", "15px Arial", "#FFF");
    txt.y = 45;

    shape.onClick = function (event) {
        this.x -= 1;
    };
    shape2.onClick = function (event) {
        this.x += 3;
    };

    circle.onClick = function (event) {

        alert('fhdfhdfhg');

        var s = this.x + ' y:' + this.y;

        //txt.Text = "dfsdfs";

        txt.Text = "gffdfgdsgsdgsdg";

    };

    stage.addChild(shape);
    stage.addChild(shape2);
    stage.addChild(circle);
    stage.addChild(txt);

    //Update stage will render next frame
    createjs.Ticker.setFPS(15);
    createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick() {

        console.log('test');

        circle.x += 2;

        stage.update();
    }


}

Upvotes: 0

Views: 8149

Answers (2)

ElChiniNet
ElChiniNet

Reputation: 2902

You need to update the stage after update the "text" property (Maybe your ticker doesn't work for some reason):

circle.onClick = function (event) {

    txt.text = "gffdfgdsgsdgsdg";

    stage.update();

};

PD: Note that the "text" property is lowercase.

Upvotes: 1

Hello-World
Hello-World

Reputation: 9555

The solution was to use the lower case text property;

txt.text = "update text";

Upvotes: 1

Related Questions