Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Location
    New Zealand
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Undefined variable in function - scope issue?

    Hi all,

    I'm just starting out with Javascript as a development language and this will probably be a relatively simple problem for someone to solve for me.

    I am trying to access a variable (this.bodyEl.innerHTML) from within a function but get an error message indicating that it is "undefined". I know that it is a valid variable because I call it elsewhere outside of the inner function itself.

    I'm sure this is just a scope issue, but I'd welcome any suggestions on how to solve it with an explanation of where I've gone wrong if you have the time.

    Here's the code:

    Code:
        displayFeed: function(responseData) {
            this.bodyEl.innerHTML = "xxxx"; // I can see this
            var responseDoc = Presto.Util.parseXml(responseData);
            var items = Ext.DomQuery.select("/rss/channel/item", responseDoc);
            items.each(function(item, bodyHTML) {
                var rssTitle = Ext.DomQuery.selectValue("/title", item);
                var rssDescription = Ext.DomQuery.selectValue("/description", item);
                var rssLink = Ext.DomQuery.selectValue("/link", item);
                // but this results in an undefined error
                this.bodyEl.innerHTML = '<a href="' + rssLink + '">' + rssTitle + '</a><br/>';
            }); // end of items processing
        }
    This is a fragment of the code from my script. The first access of "this.bodyEl.innerHTML" works fine, but the second access in the items.each loop doesn't and I get an undefined variable error.

    Is this a scoping problem, and if so how is it best solved.

    Thanks in advance, Innes (NZ)
    Last edited by nzbluefish; 10-28-2009 at 09:15 AM.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    This inside the each is referring to something else. You can see that by inspecting this in firebug with a breakpoint.

    You need to make a reference to this outside of the each loop.

    Code:
            var that = this;
            items.each(function(item, bodyHTML) {
                ...
                that.bodyEl.innerHTML = '<a href="' + rssLink + '">' + rssTitle + '</a><br/>';
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Location
    New Zealand
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi Eric,

    Thanks for the reply and the coding tip. It worked perfectly and I could access the outer object.

    I had another tip passed on to me that also worked for this so, I'll post that as well:


    Code:
    ...
    items.each(function(item) {
                var rssTitle = Ext.DomQuery.selectValue("/title", item);
                var rssDescription = Ext.DomQuery.selectValue("/description", item);
                var rssLink = Ext.DomQuery.selectValue("/link", item);
                // but this results in an undefined error
                this.bodyEl.innerHTML = '<a href="' + rssLink + '">' + rssTitle + '</a><br/>';
            }, this); // end of items processing
    ...

    Cheers, Innes (NZ)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •