JavaScript scope error, variables undefined

Question

Please look at this code:

<script>
var mygrid;
function lock(){
    for (var i=1; i<15; i++)
    {
        var cur_row=i + "";
            mygrid.lockRow(cur_row,true);
            mygrid.setRowColor(i,"#E5E5E5");
    }
}
function doInitGrid(){
mygrid = new SomeClass;
}
</script>
</head>
<body onload="doInitGrid()" dir=rtl>
<div id="mygrid_container" style="width:905px;height:550px;"></div>
<script>lock();</script>
  <button onclick="addRow()">Add Row</button>  
  <button onclick="removeRow()">Remove Row</button>
  <button onclick="lock()">lock Row</button>
</body>

Why when I run lock function (Without the button), my var is undefined, and when I click on the button everything is ok?

Quentin · Accepted Answer · 2011-12-13 11:19:11Z

2

This is a timing issue, not a scope issue.

You call doInitGrid() only onload so it won't assign a value to mygrid until after the document has finished loading.

When you call lock() inline, you do so as the document loads.

Presumably you have waited until the document has finished loading before clicking on the button.

answered Dec 13, 2011 at 11:19

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

4 Comments

Gabi Over a year ago

So how can I call lock at the correct timing? is there any solution?

Quentin Over a year ago

Move to call to just after you make the assignment in the onload event handler.

Gabi Over a year ago

But i have a problem that only after i called <div id="mygrid_container" style="width:905px;height:550px;"></div> I can do a lock, So I need the function to be called after the div is exist..

Quentin Over a year ago

Which it will if you do what I said.

nnnnnn · Accepted Answer · 2011-12-13 11:21:49Z

0

If by "my var is undefined" you mean that the variable mygrid is undefined, that's because you initialise it inside the function doInitGrid() which is not called until onload of the page. The onload event happens after the whole page has finished loading. Other inline script runs when the browser encounters it as it parses the document.

answered Dec 13, 2011 at 11:21

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

Pavan · Accepted Answer · 2011-12-13 11:23:43Z

0

I am not sure when you have called the lock function without clicking button. But it appears that that the doInitGrid function was not executed when you have executed the lock function. The below code may work

function lock(){ 
    if(!mygrid){
      doInitGrid();
    }
    for (var i=1; i<15; i++) 
    { 
        var cur_row=i + ""; 
        mygrid.lockRow(cur_row,true); 
        mygrid.setRowColor(i,"#E5E5E5"); 
    } 
}

answered Dec 13, 2011 at 11:23

Pavan

4,3391 gold badge24 silver badges25 bronze badges

Comments

Kris · Accepted Answer · 2011-12-13 11:24:37Z

0

You are calling load() before the document gets loaded completely. So your variable is not assigned as doInitgrid is not yet called.(it gets called only after document is fully loaded)

answered Dec 13, 2011 at 11:24

Kris

8,8984 gold badges45 silver badges71 bronze badges

Comments

techfoobar · Accepted Answer · 2011-12-13 11:26:23Z

0

You are instantiating mygrid inside the function doInitGrid() which is called only on onload. But your script statement <script>lock();</script> executes before the page is loaded as it is part of the page HTML. When this script block executes, the value of mygrid is undefined which is the default value set by JS for all variables declared without an initial value.

If you want to call lock() when the page loads up, call it on onload after the call to doInitGrid() like this:

<body onload="doInitGrid(); lock();" dir=rtl>

answered Dec 13, 2011 at 11:26

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

2 Comments

Gabi Over a year ago

But i have a problem that only after i called <div id="mygrid_container" style="width:905px;height:550px;"></div> I can do a lock, So I need the function to be called after the div is exist.

techfoobar Over a year ago

Onload will be triggered only after all the elements in your HTML are loaded. So it is safe to call lock() in your onload, since the div you are mentioning is guaranteed to be loaded by then.

JohnP · Accepted Answer · 2011-12-13 11:29:55Z

0

Quentin has answered your question, But I'd like to add that it would be better to clean up your code a bit. Something like this.

<script>

function lock(mygrid){ //pass in the grid var
    for (var i=1; i<15; i++)
    {
        var cur_row=i + "";
            mygrid.lockRow(cur_row,true);
            mygrid.setRowColor(i,"#E5E5E5");
    }
}

function getInitGrid(){
   //some initialization code here maybe. Otherwise just take this out
   return new SomeClass;//return an instance
}

var mygrid = getInitGrid();

//and then pass in the mygrid variable wherever you call lock

lock(mygrid);
</script>

edited Dec 13, 2011 at 11:29

answered Dec 13, 2011 at 11:22

JohnP

50k13 gold badges112 silver badges142 bronze badges

Collectives™ on Stack Overflow

JavaScript scope error, variables undefined

6 Answers 6

4 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related