JavaScript - Possible Scope Issue With Closures

Hello... Thanks for reading...

I am getting an undefined error when i try to get a value from this array in the interior loop...

Code:

// This is the array I am trying to access
AuditTable [0] = ["Visio Modifed date","Word Modified Date","User Status","User Comment","Last Audit","Audit Status","Audit Comment"]
AuditTable [1] = ["11/23/2009 8:52:18 AM","missing","OK","user comment number 1","1/1/2009","ok","audit comment number 1"]
AuditTable [2] = ["11/24/2009 12:21:19 AM","missing","Out of Date","Changes from 2008 not implemented","1/2/2009","Out of Date","needs update"]
AuditTable [3] = ["11/22/2009 9:24:42 PM","missing","Incomplete","Document doesnt cover all possibilities","1/3/2009","Inadequate","needs update"]

I have hard coded values and had success such as:
Code:

data = AuditTable[1][0]

But when I put the vars associated with the loop in I get an undefined error - AuditTable[i] is undefined:
Code:

// produces error
data = AuditTable[i][j]
//Works but retrieves wrong data
data = AuditTable[j][i]
//Works but retrieves wrong data
data = AuditTable[1][i]
//Works but retrieves wrong data
data = AuditTable[j][2]

I must be trying to access the array incorrectly or something... I have defined all the vars, and tried many combinations, alerted the values of both vars so I can prove it is not a scope issue... Am I missing something obvious? Thanks much...

Code:

var reportArray=new Array();
var reportData, title, subTitle, data;
		

for(i in parmarray)// loop thru AuditTable array and get values
		{
			title = '<div style="font-family:verdana; font-size:14px; font-weight:bold; margin:25px 0px 5px 30px">';
			title += namearray[i][0];
			title += '</div>';
			reportArray.push(title);//Take compiled variable value and put it into array
			
			for(j=0; j < AuditTable[0].length; j++)// loop thru AuditTable array and get values
			{
				
				subTitle = AuditTable[0][j];//points to first row of AuditTable where the labels are
				data = AuditTable[1][0];//points to the current row where actual data is
				
				html = i + j +'<div style="font-family:verdana; font-size:12px; color:#696969; font-weight:bold; margin-left:30px;">';
				html += subTitle;
				html += '</div><div style="font-family:verdana; font-size:12px; color:#a9a9a9; margin-left:30px; margin-bottom:10px">';
				html += data;
				html += "</div>";

				reportArray.push(html);// put results into array
			}		
		}

Hey all,

I am having issues with below script. Firebug returns:
form[0] is undefined
[Break on this error] $(form[0].elements).each(function() {

I have this under my form:
<script>
var thisForm = $('#validateForm');
thisForm.validation();
</script>



Code:

(function($) {
    /*
    Validation Singleton
    */
    var Validation = function() {
        
        var rules = {
            
            email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            },
            url : {

               check : function(value) {

                   if(value)
                       return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?");
                   return true;
               },
               msg : "Enter a valid URL."
            },
            required : {
                
               check: function(value) {

                   if(value)
                       return true;
                   else
                       return false;
               },
               msg : "This field is required."
            }
        }
        var testPattern = function(value, pattern) {

            var regExp = new RegExp("^"+pattern+"$","");
            return regExp.test(value);
        }
        return {
            
            addRule : function(name, rule) {

                rules[name] = rule;
            },
            getRule : function(name) {

                return rules[name];
            }
        }
    }
    
    /* 
    Form factory 
    */
    var Form = function(form) {
        
        var fields = [];
    
        $(form[0].elements).each(function() {
            var field = $(this);
            if(field.attr('validation') !== undefined) {
                fields.push(new Field(field));
            }
        });
        this.fields = fields;
    }
    Form.prototype = {
        validate : function() {

            for(field in this.fields) {
                
                this.fields[field].validate();
            }
        },
        isValid : function() {
            
            for(field in this.fields) {
                
                if(!this.fields[field].valid) {
            
                    this.fields[field].field.focus();
                    return false;
                }
            }
            return true;
        }
    }
    
    /* 
    Field factory 
    */
    var Field = function(field) {

        this.field = field;
        this.valid = false;
        this.attach("change");
    }
    Field.prototype = {
        
        attach : function(event) {
        
            var obj = this;
            if(event == "change") {
                obj.field.bind("change",function() {
                    return obj.validate();
                });
            }
            if(event == "keyup") {
                obj.field.bind("keyup",function(e) {
                    return obj.validate();
                });
            }
        },
        validate : function() {
            
            var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass),
                types = field.attr("validation").split(" "),
                container = field.parent(),
                errors = []; 
            
            field.next(".errorlist").remove();
            for (var type in types) {

                var rule = $.Validation.getRule(types[type]);
                if(!rule.check(field.val())) {

                    container.addClass("error");
                    errors.push(rule.msg);
                }
            }
            if(errors.length) {

                obj.field.unbind("keyup")
                obj.attach("keyup");
                field.after(errorlist.empty());
                for(error in errors) {
                
                    errorlist.append("<li>"+ errors[error] +"</li>");        
                }
                obj.valid = false;
            } 
            else {
                errorlist.remove();
                container.removeClass("error");
                obj.valid = true;
            }
        }
    }
    
    /*
    Validation extends jQuery prototype
    */
    $.extend($.fn, {
        
        validation : function() {
            
            var validator = new Form($(this));
            $.data($(this)[0], 'validator', validator);
            
            $(this).bind("submit", function(e) {
                validator.validate();
                if(!validator.isValid()) {
                    e.preventDefault();
                }
            });
        },
        validate : function() {
            
            var validator = $.data($(this)[0], 'validator');
            validator.validate();
            return validator.isValid();
            
        }
    });
    $.Validation = new Validation();
})(jQuery);

Hey all,

I am confused about the true difference between the two below examples.

Code:

first example:
// Demonstrating a problem with closures and loops
var myArray = [“Apple”, “Car”, “Tree”, “Castle”];
var closureArray = new Array();
// Loop through myArray and create a closure for each that outputs that item
for (var i = 0; i < myArray.length; i++) {
var theItem = myArray[i];
closureArray[i] = function() {
document.write(theItem + “ < br / > ”);
}
}
// Loop through the closures and execute each one.
for (var i = 0; i < closureArray.length; i++) {
closureArray[i]();
}

Here we iterate through the length of myArray, assigning the current index of myArray to theItem variable. We declare closureArray 4 times as an anonymous function. The anonymous function in turn declares the predefined write() function, which is passed parameters. Since write() is in closureArray() a closure is created??? During each iteration, theItem is reassigned its value. The four closures reference this value. Since they reference this same value and since this value is reassigned ultimately to the value of the fourth index position, tHe time we execute closureArray later on, all four closures output the same string. This is because all four closures are within the same scope "the same environment" and therefore are referencing the same local variable, which has changed.

I have a couple of problems with this example:
1) I thought a closure is a function that is returned - the inner function is not returned above.
2) theItem is not even a local variable of the parent function (closureArray) - I thought in order for a closure to work, the inner function only accesses the local variables of the outer function, but in this case the local variable is defined OUTSIDE of the parent function.
3) The guy says the "the four closures are sharing the same environment." The thing is even in the second example, they are sharing the same environment.

Second example:
Code:

// A correct use of closures within loops
var myArray = [“Apple”, “Car”, “Tree”, “Castle”];
var closureArray = new Array();
function writeItem(word) {
return function() {
document.write(word + “ < br / > ”);
}
}
// Loop through myArray and create a closure for each that outputs that item
for (var i = 0; i < myArray.length; i++) {
var theItem = myArray[i];
closureArray[i] = writeItem(theItem);
}
// Loop through the closures and execute each one.
for (var i = 0; i < closureArray.length; i++) {
closureArray[i]();
}

Here we iterate over the length of myArray (4 times), assigning the index of myArray to theItem variable. We also return a function reference to the closureArray during each iteration (closureArray[i]), where i is index number so we assign 4 functon references. So when we iterate through myArray, we immediatelly call the writeItem() fucntion passing an argument of theItem at its current value. This returns a child anonymous function and when that child function is called, it will execute a block that calls the predefined write() method. We assign that returned anonymous function to the variable closureArray. Hence, closureArray holds a reference to that anonymous function. So closureArray during each iteration holds a reference to the anonymous function and we later call closureArray, which in turn calls the anonymous function, therefore calling the predefined write() function to output the local variable of the parent function. This outputs each distinct index of myArray.
QUESTION:
This is because since we created the closure, when we call writeItem, passing theItem argument, since theItem is a local variable of the parent function of the closure, it is never destroyed when we later call closureArray (the reference to the child anonymous function)? Yet weren't we using a closure in the first example as well? So whey wasn't those variables preserved?

I don't think it has anything to do with assigning a returned anonymous function to closureArray. Even though an anonymous function creates a new memory position in the javascript engine, therefore not overwriting the other function references we create during the iteration, it's still referring to a local variable declared outside the reference. So if it's about the closure retaining value of parent's local variable even after exiting the parent function allowing for the current indexes to be preserved, then why did the closure in the first example fail to retain each index?

Thanks for response

hi all ~ this is my code, when i change the first checkbox , i want to change the var theSame, but it seams doesn't change in if(theSame == 1) ;
but it changes in alert("b"+theSame) , it's queer, how to handle this ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
    var theSame = 1;
    $("input[name='thesame']").change(function(){
        theSame = $(this).is(":checked") ? 1 : 0;
        alert("a"+theSame)

        });
        if(theSame == 1){
            $(".check_list input").change(function(){
                alert("b"+theSame)
            });
        }
});
    </script>
</head>
<body>
<input type="checkbox" name="thesame">same
<br>
<div class="check_list">
    <input type="checkbox" name="son">ppp
    <input type="checkbox" name="son">ppp
    <input type="checkbox" name="son">ppp
</div>
</body>
</html>

I don't really understand why a.d() fails in the following, or rather why a.d can't access local vars in a, or how to rewrite this so that it can

PHP Code:
window.a = (function () {
    var b = '<br>hello ';
    var c = function (){
        document.write(b+'from c') // in this scope we can access the local vars of a
    };

    c()  // this will work and write hello from c

    document.write(b)  // this will work and write hello from b

    return{c:c}

})();

a.d = function () {
    document.write(b+'from d')    // even though as far as I can tell I have added d to the object a,
}                                // this still can't access the local vars of a... why not? how can I change that?

a.d()   // doesn't work :(

a.c()  // this works too because we returned c in a's return statement 

I have a popup in one of my pages which is populated via AJAX call with a list of click-able options, this is all good, however I am now trying to display a javascript tree in the popup but it can not seem to 'see' the javascript routine that creates the tree, even if I hard code that into the popup itself, so the tree starts with d=new dTree() , and javasript is telling me that 'd' is undefined.

the code works fine in a regular webpage but when pulled up in a AJAX generated popup it cant see squat? I tried parent.dTree() etc but to no avail.

Is this because the javascript is loaded after the main page load via AJAX? if so is it accessible in anyway ?

Hi there - this seems like it should be an obvious problem - can anyone spot it?

I have an object, declared this way:


Code:

var FK_gid = new picChooser('FK_gid', FK_gidArray);
FK_gid.init();

and a select group like this:
Code:

<select id = "FK_gid" name = "FK_gid">

		<option value="none" selected="true" >None</option>
		<option value="335" >pics/zoobins.jpg</option>
etc. etc. 
</select>

picChooser in construction sets the onchange of the select group like this:

Code:

this.list = document.getElementById('FK_gid');

    
this.list.setAttribute("onchange", "FK_gid.displayImage();");

and the object's displayImage(); is like this:

Code:

this.displayImage = function () {
        
        this.clearImage();
        
        if (this.list.selectedIndex != 0)
        {
            pic = new Image();
            pic.src = this.reformat(this.list.options[this.list.selectedIndex].innerHTML);
            
            img = document.createElement("img");
            img.src = pic.src;
            this.preview.appendChild(img);
            
        }
       
     
    }

But whenever I choose something else off the list I get this error message:

Code:

TypeError: Result of expression 'FK_gid.displayImage' [undefined] is not a function.

It's bizarre because when I type FK_gid.displayImage(); into Safari's dynamic console the function works perfectly...

Any ideas?

Thanks
Edd

I am writing a rather large bookmarklet. For this bookmarklet I would like to have some user-defined variable values. My idea for this is a bookmarklet code something like this

Code:

  var MY_var = "my value";

  (function(){
        /* usual loading of bookmarklet script file */
        var s=document.createElement('script');
        s.type='text/javascript';
        s.src='https://myhost.com/path/to/my.js;
        document.getElementsByTagName('head')[0].appendChild(s);
    })();

However I can't access the variable MY_var in the bookmarklet script file "my.js".

Is there any way I can change the bookmarklet so that I can access MY_var in my.js?

Let's say I'm defining an object and I want the constructor to take one input and ten save it. I'd like to do something like this:

function apple(color) {
this.color = arguments.color;
}

But of course that doesn't work because arguments isn't a scope. My question is, is there a scope I can use. What I've been doing instead is this:

function apple(new_color) {this.color = new_color;}

But that just seems less than perfectly pretty.

I don't even know where to begin with this one.
I don't know the terminology for what I am trying to do here, and the sample code is too big and cluttered to post. So I put together the following to illustrate the structure of the object that I am trying to overcome. I have a method chain within an object, and I need to override one of the methods, but when I do so I loose access to the private methods and properties of it's containing object... I googled this for several hours, and the best that I can come up with is that I need to somehow use call() to access the scope of another object. But I don't understand call() or apply() at all, and I've read many tutorials on those...

Code:

window.oModule['Report'] = (function(){
    var _privateProp1 = '' ,
        _privateMethod1 = function(){
            // ...
        } ,
        _publicMethod1  = function(){
            // ...
        } ,
        _publicMethod2 = (function(){
            var _sub_privateProp1 = '' ,
                _sub_privateMethod1 = function(param1,param2){
                    // ...
                } ,
                _sub_publicMethod1  = function(){
                    // ...
                } ,
                _sub_publicMethod2 = function(start , end){  // I need to replace this method from somewhere else
                    var _neededValue = '';
                    
                    for(var i = start ; i<end ; ++i) {
                        // ...
                        _neededValue += _sub_privateMethod1(arg1,arg2)
                    }
                    return _neededValue;
                } ;
            
            return{
                '_sub_publicMethod1' : _sub_publicMethod1 ,
                '_sub_publicMethod2' : _sub_publicMethod2
            }
    })() ;
    
    return{
        '_publicMethod1' : _publicMethod1 ,
        '_publicMethod2' : _publicMethod2
    }
})();

alert(oModule.Report._publicMethod2._sub_publicMethod2(1,5))  // This works fine

oModule.Report._publicMethod2._sub_publicMethod2 = function(start,end){  // Doing this modifies the output of all expressions that already call the sub method (which is what I need)
    var _neededValue = '';
    // ...
    return start+end
}

alert(oModule.Report._publicMethod2._sub_publicMethod2(1,5))  // This will alert 6 (as intended)


oModule.Report._publicMethod2._sub_publicMethod2 = function(start,end){  // Doing this modifies the output of all expressions that already call the sub method (which is what I need)
    var _neededValue = '';
    for(var i = start ; i<end ; ++i) {
        // ... different set of instructions
         _neededValue += _sub_privateMethod1(arg1,arg2)  // This line causes an error: _sub_privateMethod1 is undefined
    }
    return _neededValue
}

I am doing project exercises from a JavaScript book for a college class. I am creating a brand new .html document for each project.

I was under the impression that each unique page name would have its very own cookie scope. But to my surprise it seems adding/loading cookies using 'document.cookie' doesn't assign new cookies to each page. I am seeing that when I try to load document.cookie in new .html pages there are cookies that were already created in past pages in the document.cookie property/string.

So whats the 'default' scope of a document cookie. Do I have to set the domain property to get unique cookies for each .html page I create?

Thanks for the help.

Edit: Okay, it seems that cookies have a default scope of the folder your .html page resides in and all sub-folders that your page resides in. I moved my project folder so that it was a sibling of my projects folder and it got its own cookies that way.

Question: if I declare a variable in on js fiile, is this available to another js file that is loaded?

Answer: yes, it's available (unless inside of a function or something)

BUT: does it matter WHERE I declare this variable??

Let's say, I have the following in my HTML file:
<script src="script/main.js"></script> And then at the very bottom of my HTML page before the </body> tag I have:
<script type="text/javascript">var myvariable = "Sample Data";</script> So, is myvariable available to main.js?

In simple tests I've done, yes it does seem to be available

But... what if I have a lot of other js code running in between
Does this change anything?

Thanks


OM

Hello,

I am trying add some animation effects to a navigation button and am having some problems with my code.

I am using setInterval(); and the problem came with trying to clear it using clearInterval();

if i have this code then it seems to clear it fine:
Code:

 var i = 21;
	
function w(){
			document.getElementById("homebtntop").style.height = i + "px";
			i--;
			}
			
function c(){
	if(i<=6){
	window.clearInterval(t);
	}
	}
	
function r(){
	t = self.setInterval("w()",15);
	}

function slideIn(){
	

				
	t = self.setInterval("w()",15);
	
	
	clearInterval(t);
	
	
	}

but if i then try to call it from inside a function c(); it doesn't work:
Code:

var i = 21;
	
function w(){
			document.getElementById("homebtntop").style.height = i + "px";
			i--;
			}
			
function c(){
	if(i<=6){
	window.clearInterval(t);
	}
	}
	
function r(){
	t = self.setInterval("w()",15);
	}

function slideIn(){
	

				
	t = self.setInterval("w()",15);
	
	
	clearInterval(t);
	
	
	}

Any ideas? i am sorry if my code makes no ssense or is badly formatted, this is my first time with javasript.

Thank you.

This is a bit of a strange one. I have been trying to call a function in a child object from the parent object but the child seems to be going out of scope in onbeforeunload function. These function calls work outside of a onbeforeunload, so it only fails when called in onbeforeunload. I can fix it by making the child object a global but I was trying to avoid that. Anyone know why my childobject is out of scope when called in onbeforeunload? Notice I call that same function in windows onload event and it works fine. Here is the code (I have simplified as much as possible to just show the error):

Code:

<html>
   
   <head>
   <title>Broken Page</title>    
	  
<script language="javascript" type="text/javascript">
	
	var myparent;
	
	function windowLaunch()
	{
		myparent = new parent();
		myparent.getchildvalue();
		window.onbeforeunload = myparent.getchildvalue;
	}

	function parent()
	{
		this.mychild = new childobject("myinput");
		this.getchildvalue = function()
		{
			var tmpval = this.mychild.returnvalue();
		};

	}

	function childobject(thename)
	{
		this.myprop = thename;
		this.returnvalue = function()
		{
			return (document.getElementById(this.myprop).value);
		};
	}
	
</script>
   </head>
   
   <body id="thebody" onload="windowLaunch();">
    <div id="outerdiv">
            <span title="This Input Box">My Input:</span><br />
            <input id="myinput" style="width: 290px"/>
    </div>
   </body>
   
</html>

Hey everyone,

I wanted to write my own script for a fade-in animation, since the ones I have found have got too many options or need some framework, which makes them unnecessarily big. I wanted to learn too.

Unfortunately, the code didn't work as I wanted, and I commented some things so as to find out what's happening.

The only function called from outside is fadeIn with a string as argument (in the example, this string is: d1296668690535). This is the code:

Code:

var fadems = 500;	// Anim. duration in milliseconds
var fps = 20;		// Frames per second

function fadeIn(elemId){
	var frames = fadems/1000 * fps;
	var delay = 1000 / fps;
	var incrOp = 1 / frames;
	
	//document.getElementById(elemId).style.zoom = '1';
	
	setOp(elemId, 0);
	
	for(i=1; i<=frames; i++){
		debugOutLn("(fadeIn for) elemId = " + elemId);
		setTimeout("setOp(" + elemId + "," + incrOp*i + ")", delay*i);
	}
}

function setOp(elemId, val){
	debugOutLn("(setOp) elemId = " + elemId + "; val = " + val);
	// document.getElementById(elemId).style.opacity = val;
	// document.getElementById(elemId).style.filter = 'alpha(opacity = ' + val * 100 + ')';
}

Code:

function debugOutLn(str){
	document.getElementById("debug").innerHTML += str + "<br />";
}

And this is the text it outputs (on Opera 11.01):

Code:

(setOp) elemId = d1296668690535; val = 0
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(setOp) elemId =  [object HTMLDivElement] ; val = 0.1
(setOp) elemId =  [object HTMLDivElement] ; val = 0.2
(setOp) elemId =  [object HTMLDivElement] ; val = 0.30000000000000004
(setOp) elemId =  [object HTMLDivElement] ; val = 0.4
(setOp) elemId =  [object HTMLDivElement] ; val = 0.5
(setOp) elemId =  [object HTMLDivElement] ; val = 0.6000000000000001
(setOp) elemId =  [object HTMLDivElement] ; val = 0.7
(setOp) elemId =  [object HTMLDivElement] ; val = 0.8
(setOp) elemId =  [object HTMLDivElement] ; val = 0.9
(setOp) elemId =  [object HTMLDivElement] ; val = 1

Why is an object reference assigned to what was previously a string?


Thanks for the help!