cannot access function within function in javascript

Question

I need to know what I am doing wrong because I cannot call the internal functions show or hide?

(function()
{
    var Fresh = {
        notify:function()
        {
            var timeout = 20000;
            $("#notify-container div").get(0).id.substr(7,1) == "1" && (show(),setTimeout(hide(),timeout));
            var show = function ()
            {
                $("body").animate({marginTop: "2.5em"}, "fast", "linear");
                $("#notify-container div:eq(0)").fadeIn("slow");
            },
            hide = function()
            {
               $("#notify-container div").hide();
            }
        }//END notify
    }
    window.Fresh = Fresh;
})();
Fresh.notify();

thanks, Richard

move this line $("#notify-container div").get(0).id.substr(7, 1) == "1" && (show(), setTimeout(hide(), timeout)); below the definition of show/hide. — Cory Kendall
– Cory Kendall, Commented Sep 14, 2012 at 9:21
thanks, that was it, I was contemplating it could not be that, could you put your answer in an "answer". Also do you know what it means if you put a return in the self execution function and return object functions like return {show:function(){etc},hide:etc} — Richard
– Richard, Commented Sep 14, 2012 at 9:33
I saw that somewhere, anyway, I wanted to be able to write fresh.notify.showmessage() — Richard
– Richard, Commented Sep 14, 2012 at 9:38
@CoryKendall: Yes it does, Richard could have written this code like var Fresh = (function(){...return {notify:functio(){...};})(); which would have assigned the object literal directly to the global variable Fresh, without the need for that extra line window.Fresh = Fresh; — Elias Van Ootegem
– Elias Van Ootegem, Commented Sep 14, 2012 at 9:40

Elias Van Ootegem · Accepted Answer · 2012-09-14 09:46:42Z

3

UPDATE

If you wanted to be able to do something like: Fresh.notify.showMessage(), all you need to do is assign a property to the function notify:

var Fresh = {notify:function(){return 'notify called';}};
Fresh.notify.showMessage = function () { return this() + ' and showMessage, too!';};
Fresh.notify();//notify called
Fresh.notify.showMessage();//notify called and showMessage, too!

This will point to the function object here, and can be called as such (this() === Fresh.notify();). That's all there is too it.

There's a number of issues with this code. First of all: it's great that you're trying to use closures. But you're not using them to the fullest, if you don't mind my saying. For example: the notify method is packed with function declarations and jQuery selectors. This means that each time the method is invoked, new function objects will be created and the selectors will cause the dom to be searched time and time again. It's better to just keep the functions and the dom elements referenced in the closure scope:

(function()
{
    var body = $("body");
    var notifyDiv = $("#notify-container div")[0];
    var notifyDivEq0 = $("#notify-container div:eq(0)");
    var show = function ()
    {
        body.animate({marginTop: "2.5em"}, "fast", "linear");
        notifyDivEq0.fadeIn("slow");
    };
    var hide = function()
    {//notifyDiv is not a jQ object, just pass it to jQ again:
        $(notifyDiv).hide();
    };
    var timeout = 20000;
    var Fresh = {
        notify:function()
        {
            //this doesn't really make sense to me...
            //notifyDiv.id.substr(7,1) == "1" && (show(),setTimeout(hide,timeout));
            //I think this is what you want:
            if (notifyDiv.id.charAt(6) === '1')
            {
                show();
                setTimeout(hide,timeout);//pass function reference
                //setTimeout(hide(),timeout); calls return value of hide, which is undefined here
            }
        }//END notify
    }
    window.Fresh = Fresh;
})();
Fresh.notify();

It's hard to make suggestions in this case, though because, on its own, this code doesn't really make much sense. I'd suggest you set up a fiddle so we can see the code at work (or see the code fail :P)

edited Sep 14, 2012 at 9:46

answered Sep 14, 2012 at 9:36

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Richard Over a year ago

thanks @Elias, using charAt is just a different way of getting the same thing isn't it?only a few characters shorter..

Elias Van Ootegem Over a year ago

Yup, and it's X-browser compatible. If you don't care about older IE clients, you could even use elem.id[6];, both charAt and [](array access) should also be Very, very marginally faster

Richard Over a year ago

About setting up references, you are right...I did know about that, but this is just code in very early stages, where I change things a lot and test little lines of code if they actually are going to work..thanks for the input

Richard Over a year ago

I general I don't really care about IE, I get tired of reading things that need a workaround for ie. I just want to ban it al together. But, on the other hand, I am also not a very comercial enterprise

Elias Van Ootegem Over a year ago

@Richard, sadly, all too many numbskull-dunce's still use IE. Saying I dislike IE would be an understatement, to say the least: I loathe it, with passion

raina77ow · Accepted Answer · 2012-09-14 09:26:01Z

2

First, you're trying to use show value when it's not defined yet (though show variable does exist in that scope):

function test() {
  show(); // TypeError: show is not a function
  var show = function() { console.log(42); };
}

It's easily fixable with moving var show line above the point where it'll be called:

function test() {
  var show = function() { console.log(42); };
  show();
}
test(); // 42

... or if you define functions in more 'traditional' way (with function show() { ... } notation).

function test() {
  show();
  function show() { console.log(42); };
}
test(); // 42

Second, you should use this instead:

... && (show(), setTimeout(hide, timeout) );

... as it's the function name, and not the function result, that should be passed to setTimeout as the first argument.

edited Sep 14, 2012 at 9:26

answered Sep 14, 2012 at 9:19

raina77ow

107k16 gold badges205 silver badges240 bronze badges

2 Comments

raina77ow Over a year ago

Updated my answer. I wonder, btw, why do you have to define some local show and hide functions instead of using more generic ones, taking the element they should work on (#notify-container in this specific case) as an argument.

Richard Over a year ago

this was just sample code, I needed to know how to call functions, I fill in the rest of the logic later. I am still thinking how to go about it. Wanted to try things in a different way instead of heaving all kinds of isolated functions in my javascript file. I want to learn to write more plugin style

Vincent Thibault · Accepted Answer · 2012-09-14 09:36:13Z

You have to define show and hide before, also change the hide() as they said. The result will be something like this:

(function()
{
    var Fresh = {
        notify:function()
        {
            var show = function()
            {
                $("body").animate({marginTop: "2.5em"}, "fast", "linear");
                $("#notify-container div:eq(0)").fadeIn("slow");
            },
            hide = function()
            {
               $("#notify-container div").hide();
            },
            timeout = 20000;
            $("#notify-container div").get(0).id.substr(7,1) == "1" && ( show(), setTimeout(hide,timeout) );

        }//END notify
    }
    window.Fresh = Fresh;
})();
Fresh.notify();

kannanrbk · Accepted Answer · 2012-09-14 09:35:37Z

1

I think order of calling show , hide is the matter . I have modified your code . It works fine . Please visit the link http://jsfiddle.net/dzZe3/1/

answered Sep 14, 2012 at 9:35

kannanrbk

7,17413 gold badges58 silver badges97 bronze badges

Comments

C.. · Accepted Answer · 2012-09-14 09:21:43Z

0

the (show(),setTimeout(hide(),timeout));

needs to at least be

(show(),setTimeout(function() {hide()},timeout));

or

(show(),setTimeout(hide,timeout));

answered Sep 14, 2012 at 9:21

C..

8024 silver badges16 bronze badges

Collectives™ on Stack Overflow

cannot access function within function in javascript

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related