CODEWITHSUNDEEP
javascriptscope
Gabi
Gabi

Reputation: 53

JavaScript scope error, variables undefined

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?

Upvotes: 0

Views: 243

Answers (6)

JohnP
JohnP

Reputation: 50019

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>

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

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>

Upvotes: 0

Kris
Kris

Reputation: 8868

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)

Upvotes: 0

Pavan
Pavan

Reputation: 4329

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"); 
    } 
}

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150030

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943510

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.

Upvotes: 2

Related Questions