JavaScript - Please Help! Only One Anonymous Functions Works At A Time.

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,

I am new to Javascript so please be gentle. In the following code how would I get the displaymember() and stats() functions to load at the same time? If I have to combine them into the same function how do I do this. Basically, I need displaymember() and stats() to both run when the page loads using onLoad="displaymember()". However, you can only load one function in this way. So I need a way of combining these 2 functions.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            function loadXMLDoc(dname) {
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhttp.open("GET", dname, false);
                xhttp.send("");
                return xhttp.responseXML;
            }

            xml = loadXMLDoc("dating_database.xml");

            x = xml.getElementsByTagName("client");

            function show(i) {
                name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
                sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
                ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue);
                region = (x[i].getElementsByTagName("region")[0].childNodes[0].nodeValue);
                profession = (x[i].getElementsByTagName("profession")[0].childNodes[0].nodeValue);
                membership_status = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue);
                seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
                education = (x[i].getElementsByTagName("education")[0].childNodes[0].nodeValue);
                body_type = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue);
                eye_colour = (x[i].getElementsByTagName("eye_colour")[0].childNodes[0].nodeValue);
                smoker = (x[i].getElementsByTagName("smoker")[0].childNodes[0].nodeValue);
                drinker = (x[i].getElementsByTagName("drinker")[0].childNodes[0].nodeValue);
                image = (x[i].getElementsByTagName("imgname")[0].childNodes[0].nodeValue);
                hairlength = (x[i].getElementsByTagName("length")[0].childNodes[0].nodeValue);
                haircolour = (x[i].getElementsByTagName("colour")[0].childNodes[0].nodeValue);
                introduction = (x[i].getElementsByTagName("introduction")[0].childNodes[0].nodeValue);
                idealdate = (x[i].getElementsByTagName("ideal_date")[0].childNodes[0].nodeValue);

                txt = "<h1>" + name + "</h1><br /><img id='profilepic' src='images/" + image + ".gif' /><table><tr><td>Sex:</td><td>" + sex + "</td><td>Seeking:</td><td>" + seeking + "</td></tr><tr><td>Ethnicity:</td><td>" + ethnicity + "</td><td>Body Type:</td><td>" + body_type + "</td></tr><tr><td>Membership status:</td><td>" + membership_status + "</td><td>Profession:</td><td>" + profession + "</td></tr><tr><td>Education:</td><td>" + education + "</td><td>Region:</td><td>" + region + "</td></tr><tr><td>Eye Colour:</td><td>" + eye_colour + "</td><td>Smoker:</td><td>" + smoker + "</td></tr><tr><td>Hair:</td><td>" + hairlength + " " + haircolour + "</td><td>Drinker</td><td>" + drinker + "</td></tr></table><br /><br /><table><tr><td>Introduction:</td></tr><tr><td>" + introduction + "</td></tr><tr><td>Ideal Date:</td></tr><tr><td>" + idealdate + "</td></tr></table>";

                document.getElementById("fixed").innerHTML = txt;
            }

            function displaymember() {

                var d = new Date();
                var curr_date = d.getDate();
                if (curr_date < 10) curr_date = "0" + curr_date;

                var curr_month = d.getMonth();
                curr_month++;
                if (curr_month < 10) curr_month = "0" + curr_month;
                var curr_year = d.getFullYear();

                //alert("date="+curr_date+" month="+curr_month+" year="+curr_year);
                for (i = 0; i < x.length; i++) {

                    membershipstatus = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue);
                    name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
                    body = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue);
                    ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue);
                    sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
                    profession = (x[i].getElementsByTagName("profession")[0].childNodes[0].nodeValue);
                    seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
                    date = (x[i].getElementsByTagName("date_joined")[0]);
                    month = (date.getElementsByTagName("month")[0].childNodes[0].nodeValue);
                    year = (date.getElementsByTagName("year")[0].childNodes[0].nodeValue);
                    var newa = document.createElement('a');
                    var aIdName = 'my' + i + 'a';
                    var ahref = '#';
                    var aclick = 'show(' + i + ')';
                    newa.setAttribute('id', aIdName);
                    newa.setAttribute('href', ahref);
                    newa.setAttribute('onclick', aclick);
                    newa.innerHTML = name + " | " + body + " " + ethnicity + " " + sex + " " + profession + " with " + membershipstatus + " membership seeks " + seeking + "<br/>";

                    if (curr_month == month && curr_year == year) {
                        document.getElementById("member").appendChild(newa);
                    }


                }

            }

            function stats() {

                var m = 0;
                var f = 0;
                for (i = 0; i < x.length; i++) {

                    sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);

                    if (sex == "Male") {
                        m++;
                    } else {
                        f++;
                    }
                    var fper = (f / x.length * 100);
                    var mper = (m / x.length * 100);
                    var fper = Math.round(fper * 100) / 100;
                    var mper = Math.round(mper * 100) / 100;

                    document.getElementById("statm").innerHTML = fper + "% <img src='images/malefemale.gif' alt='sexstats' /> " + mper + "%";
                }
            }
        </script>
    </head>
    
    <body onload="stats()">
        <div>
            <img id="background" src="images/bg.jpg" alt="" title="" />
        </div>
        <div id="pulldown" class="close">
            <div id="opacity">
            </div>
            <div id="contents">
                <div class="nav">
                    <ul class="menu">
                        <li class="top-li">
                            <a class="top-a" href="index.html">Home</a>
                        </li>
                        <li class="top-li">
                            <a class="top-a" href="#nogo">About</a>
                        </li>
                        <li class="top-li">
                            <a class="top-a last" href="#nogo">View All</a>
                        </li>
                        <li class="top-li">
                            <a class="top-a last" href="Default.aspx">Search</a>
                        </li>
                        <li class="top-li">
                            <a class="top-a last" href="register.aspx">Register</a>
                        </li>
                        <li class="top-li">
                            <a class="top-a last" href="Edit.aspx">Edit/Delete</a>
                        </li>
                    </ul>
                </div>
                <div id="lowerContent">
                    <dl>
                        <dt>
                            New Members
                        </dt>
                        <dd id="member">
                        </dd>
                    </dl>
                </div>
            </div>
            <a href="#pulldown" id="pull">Menu</a>
            <a href="#x" id="push">Close</a>
        </div>
        <div id="fixed">
            <div id="statm" onload="stats()">
            </div>
        </div>
    </body>

</html>

Code:

function move_user_img(str) {
				var step = 25;
				// change this to different step value
				switch(str) {
				case "down":
					var x = document.getElementById('imageUser').offsetTop;
					x = x + step;
					document.getElementById('imageUser').style.top = x + "px";
					break;

				case "up":
					var x = document.getElementById('imageUser').offsetTop;
					x = x - step;
					document.getElementById('imageUser').style.top = x + "px";
					break;

				case "left":
					var y = document.getElementById('imageUser').offsetLeft;
					y = y - step;
					document.getElementById('imageUser').style.left = y + "px";
					break;

				case "right":
					var y = document.getElementById('imageUser').offsetLeft;
					y = y + step;
					document.getElementById('imageUser').style.left = y + "px";
					break;
				}
			}
			function move_report_img(str) {
				var step = 25;
				// change this to different step value
				switch(str) {
				case "down":
					var x = document.getElementById('imageReport').offsetTop;
					x = x + step;
					document.getElementById('imageReport').style.top = x + "px";
					break;

				case "up":
					var x = document.getElementById('imageReport').offsetTop;
					x = x - step;
					document.getElementById('imageReport').style.top = x + "px";
					break;

				case "left":
					var y = document.getElementById('imageReport').offsetLeft;
					y = y - step;
					document.getElementById('imageReport').style.left = y + "px";
					break;

				case "right":
					var y = document.getElementById('imageReport').offsetLeft;
					y = y + step;
					document.getElementById('imageReport').style.left = y + "px";
					break;
				}
			}

Code:

<div id ="display" style="width:640px; height:480px; overflow:hidden;">

			<div>
				<img src ="
				<?php
				echo UPLOADPATH . $userImage;
				?>
				" style = "position:absolute;" id="imageUser"/>
			</div>
			<div id ="imageReport">
				<img src = "
				<?php
				echo $reportImage;
				?>
				" style = "opacity:0.25;height:700px; width:450px;" />
			</div>
		</div>
		<div style="position:absolute; top:550px; left:100px;">
			<p>Control User Image</p>
			<input type=button onClick=move_user_img('up') value='Up'>
			<input type=button onClick=move_user_img('left') value='Left'>
			<input type=button onClick=move_user_img('right') value='right'>
			<input type=button onClick=move_user_img('down') value='down'>
		</div>
		<div style="position:absolute; top:650px; left:100px;">
			<p>Control Report Image</p>
			<input type=button onClick=move_report_img('up') value='Up'>
			<input type=button onClick=move_report_img('left') value='Left'>
			<input type=button onClick=move_report_img('right') value='right'>
			<input type=button onClick=move_report_img('down') value='down'>
		</div>

Hello everybody

I am new here and my English is not very good, sorry. I hope this post is in the correct forum.Thank you in advance for helping me out.
I am from the netherlands and we are having a problem with a script.

I will explain a few things so everything is clear for you.

We are a member from a website: www.onderdelenzoeker.nl Through this website customers can ask for used carparts. If we have these parts in stock we can send the customers an email trough this website. (we are loggin in at leden.onderdelenzoeker.nl)
We don't have a regular stock and price so every email we send is unique. That is why we are using this script. When we are sending a customer an email, this script will put the parts in our webshop with the prices. The customer will get an email with a unique link and can order the parts and pay trough the internet.
But now the problem , this script won't work the first time. If we fill in a form and send it the first time the script won't work (the customer is getting an email but without the link and the parts are not in the webshop). If we fill in the same form a second time and send it the script is working and the customer is getting an email with a link and the parts are in the shop.

Now the script is working in IE and we are using Trixie (is the same like greasemonkey is for FF)

I hope I have written down all the information you need. And I hope there is somebody who can help me out.

Thank you for your time and effort. Nicole

This is the script:
PHP Code:
// ==UserScript==
// @name            onderdelenzoeker.nl Extractor for ie
// @namespace       http://www.autodemontage-wlubbers.nl
// @description     Adds products to the autodemontage-wlubbers.nl webshop width the information form the onderdelenzoeker.nl website when a users request a product.
// @date            09.05.2011
// @version         1.0.2                             
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
// @include         http://leden.onderdelenzoeker.nl/*  
// ==/UserScript==

var merk;
var model;
var bouwjaar;
var base_url = 'http://www.autodemontage-wlubbers.nl/shop/admin/services.php?action=';

$(document).ready(function(){   
  setTimeout('replace_button()',500);
});

replace_button = function(){
  if($('.info').find('td:eq(7)').length!=0){
    merk = $('.info').find('td:eq(7)').html().split('  ')[0];
    model = $('.info').find('td:eq(10)').html();
    bouwjaar = $('.info').find('td:eq(13)').html().replace(/[^A-Za-z0-9 .]/,'');

    $('.info:eq(4)').find('button').after('<input type="button" class="button" onclick="addProjectToShop();" style="width:100%" value="Verstuur gegevens naar aanvrager" />');
    
    $('.info:eq(4)').find('button:eq(0)').remove();
    
    $('body').after('<iframe style="display:none;" id="sendFrame" />');
    $('#sendFrame').attr('src',base_url+'login&pass=q6pk4mcn5kzy5hppg0bcq');
  }
  setTimeout('replace_button()',1000);
}

addProjectToShop = function (){
    $('body').after('<div style="position:fixed;top:'+(window.innerHeight/2-100)+';left:'+(window.innerWidth/2-200)+';width:400px;height:200px;border:1px solid black;background:white;" id="loadingFrame" ><h1>Sending...</h1></div>');
    var length = 10;
    var sPassword = "";
    for (i=0; i < length; i++) {
        numI = getRandomNum();
        while (checkPunc(numI)) { numI = getRandomNum(); }
        sPassword = sPassword + String.fromCharCode(numI);
    }

    var int_ = 200;    
    $('.info:eq(4)').find('label').each(function(){
    var parent = $(this).parent().parent().parent();
    
      if(parent.find('input:eq(0)').attr('checked'))
      {
        setTimeout('$(\'#sendFrame\').attr(\'src\',\''+base_url+'addProduct&pass=q6pk4mcn5kzy5hppg0bcq&code='+sPassword+'&merk='+merk+'&model='+model+'&bouwjaar='+bouwjaar+'&item='+$(this).html()+'&prijs='+parent.find('input:eq(1)').val()+'&statiegeld='+parent.find('input:eq(2)').val()+'&verzendkosten='+$('#verzendkosten').val()+'&garantie='+parent.find('select option:selected').text()+'\');',int_);
        int_ = int_ + 200;
      }
    });
    setTimeout('$(\'#sendFrame\').attr(\'src\',\''+base_url+'logout\');',int_);
    $('textarea').val($('textarea').val()+"\nU kunt de producten via onze webshop bestellen.\nKlik of kopieer de onderstaande link in uw browser.\nhttp://www.autodemontage-wlubbers.nl/shop/index.php?route=product/product/refcode&refcode="+sPassword);
    setTimeout('$(\'#loadingFrame\').remove();$(\'#sendFrame\').remove();validate_and_submit();',4000);
  return false;
}

getRandomNum = function () {
    var rndNum = Math.random()   
    rndNum = parseInt(rndNum * 1000);       
    rndNum = (rndNum % 94) + 33;   
    return rndNum;
}

checkPunc = function (num) {
    if ((num >=33) && (num <=47)) { return true; }
    if ((num >=58) && (num <=64)) { return true; }    
    if ((num >=91) && (num <=96)) { return true; }
    if ((num >=123) && (num <=126)) { return true; }
    return false;
}