Unable to access variables and functions from within working assigned onclick event functions

edited October 2013 in Newbie Questions
Hi, I'm building a control but am having trouble accessing variables and functions from within the following leftButtonOnClick and rightButtonOnClick functions.

Is anyone able to get the code working where is says 'This above commented out does not work :('

I'd very much appreciate it!

The code is also available to play with in JSFiddle: http://jsfiddle.net/RedXQuirrel/a5Wgv/

// Note: in this example I am wanting to discover HOW to:
// (1) Replace the hard-coded values of "#00ff00" and #ff0000" in the functions leftButtonOnClick and rightButtonOnClick, with the variables this.backgroundDefault and this.backgroundSelected, respectively - however this does not work.
// (2) In these functions, also fire this.leftButtonAction() and this.rightButtonAction() however these do not work either.

enyo.kind({
    name: "PanelToggleButton",
    kind: enyo.Control,
    allowHtml: true,
    content: "",
    backgroundDefault: "#00ff00",
    backgroundSelected: "#ff0000",
    leftButtonAction: function () {
        alert('left button clicked');
    },
    rightButtonAction: function () {
        alert('right button clicked');
    },

    published: {
        element: ""
    },

    create: function () {
        this.inherited(arguments);
        var tabletxt = "";
        tabletxt += "";
        tabletxt += "$%";
        tabletxt += "";

        this.setContent(tabletxt);
    },
    leftButtonOnClick: function () {
        document.getElementById("leftbutton").style.backgroundColor = "#ff0000";
        // document.getElementById("leftbutton").style.backgroundColor = this.backgroundSelected; 
        // This above commented out does not work :(
        document.getElementById("rightbutton").style.backgroundColor = "#00ff00";
        // this.leftButtonAction();
        // This above commented out does not work :(
    },
    rightButtonOnClick: function () {
        document.getElementById("leftbutton").style.backgroundColor = "#00ff00";
        document.getElementById("rightbutton").style.backgroundColor = "#ff0000";
        // this.rightButtonAction();
        // This above commented out does not work :(
    },
    rendered: function () {
        this.inherited(arguments);
        document.getElementById("leftbutton").style.backgroundColor = this.backgroundSelected;
        document.getElementById("rightbutton").style.backgroundColor = this.backgroundDefault;
        document.getElementById("leftbutton").onclick = this.leftButtonOnClick;
        document.getElementById("rightbutton").onclick = this.rightButtonOnClick;
    },
});

new PanelToggleButton().renderInto(document.body);

Comments

  • You need to bind the "this" context properly. You can accomplish that in your rendered function by using enyo.bind:
    document.getElementById("leftbutton").onclick = enyo.bind(this, this.leftButtonOnClick);
    document.getElementById("rightbutton").onclick = enyo.bind(this, this.rightButtonOnClick);
    
  • @FoulWeather is right but this is a very unconventional way to build an enyo app. You don't often have to use getElementById because the framework provides access to your controls. Is there a reason you're injecting pure HTML and trying to wire it up to enyo versus building the controls using the framework?
Sign In or Register to comment.