how to call function that is inside a function ready()?

Question

I have a function ready(e) which inside hold a canvas and some other function. I want to make an action outside the canvas to call an function inside ready(e). How can I do that? thanks very much!!

Below is a simplified version of my code.. I want to call arraytwo() outside function ready(e)...

function ready(e)
{
    var canvas;
    var canvasWidth;
    var canvasHeight;
    var ctx;
    canvas = document.getElementById('myCanvas');
    canvasWidth = 1100  ;
    canvasHeight = 1200;
    ctx = canvas.getContext('2d');
    function arraytwo() 
    {alert("arraytwo");}
}
arraytwo();

EDIT: Sorry i should have clarify, the function/information/data I use in arraytwo will have to be used in the canvas. alert() is just an example. so I can't put it outside ready(e).

EDIT2: there is one line of code before function ready(e). hope this information is useful :(

this.addEventListener("DOMContentLoaded", ready, true);

EDIT3: and this is the code for the canvas in html

<canvas id="myCanvas"></canvas>

You have to declare arraytwo() in the public namespace. By placing it inside the function ready() it only exists in the scope of ready() — PC3TJ, Oct 27 '15 at 07:37
Thanks how do I declare arraytwo() in public namespace?? (sorry newbie in javascript) — user5492444, Oct 27 '15 at 07:47

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

in this case "arraytwo" function is a private function you can call it by returning it or by using Closure pattern

    function ready(e)
    {
        var canvas;
        var ctx;
       // canvas = document.getElementById('myCanvas');
      // ctx = canvas.getContext('2d');
      return {
                arraytwo:function(){
                  alert("arraytwo");
                }
             }
    }

v = ready() // call your outer function 
v.arraytwo()// call your closures function

edited May 23 '17 at 11:58

Community

1
1

answered Oct 27 '15 at 07:43

Shailendra Sharma

6,976
2
28
48

please add canvas code(html, js) in you question so i can check – Shailendra Sharma Oct 27 '15 at 08:08
Thanks I have added some more code. Hope its useful! – user5492444 Oct 27 '15 at 08:15
Thanks. somehow mine just does not work maybe there's something wrong with my other bit of my code. But thanks so much for helping out! – user5492444 Oct 29 '15 at 08:06

score 0 · Answer 2 · answered Oct 27 '15 at 07:37

0

Why don't you just move your function outside of the ready scope?

function ready(e)
{
    var canvas;
    var ctx;
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');
}

function arraytwo(){
    alert("arraytwo");
}

arraytwo();

answered Oct 27 '15 at 07:37

Antoine

5,055
11
54
82

Sorry i should have clarify, the function/information/data I use in arraytwo will have to be used in the canvas. alert() is just an example. so I can't put it outside ready(e). – user5492444 Oct 27 '15 at 07:48
In that case @Shailendra Sharma solution has the right solution. – Antoine Oct 27 '15 at 07:57

PC3TJ · Answer 3 · 2015-10-27T08:17:11.733

function ready(e)
{
    var canvas;
    var ctx;
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');
    function arraytwo() 
    {
      alert("arraytwo");
    }
    ready.arraytwo=arraytwo;
}
ready.arraytwo();

While i stated above the reasons you shouldnt do this. You can build your object of ready by adding arraytwo as a child by adding

ready.arraytwo=arraytwo;

which will make this vissible at the global scope.

score -1 · Answer 4 · answered Oct 27 '15 at 07:38

-1

You can use events for this https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Call event on canvas outside block, and listen for it in block.

answered Oct 27 '15 at 07:38

Anton M.

472
4
14

PC3TJ · Answer 5 · 2015-10-27T07:53:24.427

-1

You have to declare arraytwo() in the public namespace. By placing it inside the function ready() it only exists in the scope of ready() There is no reason to declare a function inside a function unless it is only being used in the context and scope of the parent function. Such as if you had two functions both with a method of the same name that were different and wanted them to access variables within the scope of the parent function then you would nest them. In this instance nesting is not the correct way to go.

var canvas;
var ctx;


    function ready(e)
    {

        canvas = document.getElementById('myCanvas');
        ctx = canvas.getContext('2d');

    }

    function arraytwo()  
    {
       alert("arraytwo");
      return arrayTwoData;
    }

    var arrayTwoData=arraytwo();

Also would like to point out that it is better practice to use window.onload=function(){arrayTwo();};

edited Oct 27 '15 at 07:53

answered Oct 27 '15 at 07:41

PC3TJ

852
5
16

Sorry i should have clarify, the function/information/data I use in arraytwo will have to be used in the canvas. alert() is just an example. so I can't put it outside ready(e). – user5492444 Oct 27 '15 at 07:46
You can by passing arguments to it, returning data back from it or simply declaring the necessary variables in the public namespace. – PC3TJ Oct 27 '15 at 07:49
I edited the code above to show that you can make the data you need accessible globally. This isn't the best approach but without seeing your code and data flow it's the best I can recommend. – PC3TJ Oct 27 '15 at 07:54

how to call function that is inside a function ready()?

5 Answers5