JavaScript - Scope Issue In Loop Within A Loop

Hi,

I am doing some studying and we was to create a small loop using either the for loop, while loop or do while loop. I chose to do the for loop because it was easier to understand, but I want to know how to do the same using the while loop. Here is the for loop I have, but I cant figure out how to change to while loop.

Code:

for (var i = 0; i < 5; ++i)
{
    for (var j = i; j < 5; ++j)
{
         document.write(j + "");
  }
  document.write("<br />");
}

output is equal to:
01234
1234
234
34
4

How do you make the same using a while loop?

I have devised the following constructor based loosely on the observer pattern
Code:

Observer = function (ConditionIsTrue , codeToExecute){
            
            var
                observer = this ,
                ConditionWasMet = false ,
                
                CheckIfReady = function () {
                
                    if (ConditionIsTrue()) {
                        
                        if(!ConditionWasMet)
                            codeToExecute();
                        
                        ConditionWasMet = true;
                    
                    }
                    else {
                        if (ConditionWasMet) ConditionWasMet = false;
                    }
                };
            
            Loop.call(observer , CheckIfReady)
            observer.speed(1)
        
        };

It works fine, no problems that I know of...

But the most interesting thing happened when I attached it to my lib and ran it through the http://closure-compiler.appspot.com/home compiler
Code:

$['Observer'] = function (//...etc...

For the first time the compiler has added something to my global scope
Code:

var i=!1;
window.$=function(){//...etc...
...
Observer:function(j,k){var h=i;Loop.call(this,function(){j()?(h||k(),h=!0):h&&(h=i)});this.speed(1)}
}
})();

Can someone explain to me why the var ConditionWasMet had to be exported to the global scope?
Was it already in the global scope? That would confuse me considering the observer can be called from multiple instances without conflict...
But I don't want any surprise conflicts jumping out at me later, I appreciate the consideration.

Recently I had an issue while trying to copy an array:
I couldn't understand why modifying the new array caused modifications in the old array
Old Pedant cleared that up nicely for me in http://www.codingforums.com/showthread.php?t=240020

Now I'm trying to understand closures, and scope and all that fun stuff thanks to Venegal's great tutorial at reallifejs.com and I have the following:
Code:

<script>
    window.USER = (function(){
     
     var Employees = [['Alex',1,'ft',1],['Olivia',2,'ft',1],['Brenda',3,'ft',1],['Michael',4,'ft',1]];
     
     var info = ['Start String'];
     
     var Setup = function(){
       }
     
     return{
      CheckLogin : function(login){
       this.info = Employees[login];
       },
      
      Reset : function(){	
       },
      
      info:info,
      Emp:Employees
      };
     
     })();
</script>

And I think I got all the kinks worked out, but there was one thing that I don't understand...
Based on my other thread I expected the modification of USER.info to overwrite values in USER.Emp
Don't get me wrong, I didn't want that to happen, I am just confused as to why it didn't

I used the following buttons to test the values of USER.info and USER.Emp but again, writing to USER.info did not overwrite anything in USER.Emp....
Code:

<script>
document.write('<button onclick="alert(USER.info)">USER.info read</button>');
document.write('<button onclick="USER.info=\'Test String\'">USER.info write</button>');
document.write('<button onclick="alert(USER.Emp)">Employees read</button>');
document.write('<button onclick="USER.CheckLogin(0)">Check Login</button>');
</script>

So what I guess I'm asking is why? Or maybe: what is happening here, and how does it differ from my last issue? Was it maybe a scope issue? Or maybe something more sinister...?

Hi all,

I'm just starting out with Javascript as a development language and this will probably be a relatively simple problem for someone to solve for me.

I am trying to access a variable (this.bodyEl.innerHTML) from within a function but get an error message indicating that it is "undefined". I know that it is a valid variable because I call it elsewhere outside of the inner function itself.

I'm sure this is just a scope issue, but I'd welcome any suggestions on how to solve it with an explanation of where I've gone wrong if you have the time.

Here's the code:

Code:

    displayFeed: function(responseData) {
        this.bodyEl.innerHTML = "xxxx"; // I can see this
        var responseDoc = Presto.Util.parseXml(responseData);
        var items = Ext.DomQuery.select("/rss/channel/item", responseDoc);
        items.each(function(item, bodyHTML) {
            var rssTitle = Ext.DomQuery.selectValue("/title", item);
            var rssDescription = Ext.DomQuery.selectValue("/description", item);
            var rssLink = Ext.DomQuery.selectValue("/link", item);
            // but this results in an undefined error
            this.bodyEl.innerHTML = '<a href="' + rssLink + '">' + rssTitle + '</a><br/>';
        }); // end of items processing
    }

This is a fragment of the code from my script. The first access of "this.bodyEl.innerHTML" works fine, but the second access in the items.each loop doesn't and I get an undefined variable error.

Is this a scoping problem, and if so how is it best solved.

Thanks in advance, Innes (NZ)

Hello, I recently purchased a JavaScript book, and I am confused by one of it's examples. I was wondering if anybody could answer my question.

Here is the example:

for (loopCounter = 1; loopCounter<= 3; loopCounter++)
{
//execute this code
}

Now, what I need help with is the variable part.

The book goes on to say: ""To keep track of how many times you have looped through the code, you need a variable to keep count"

My question is: Why does the variable have the value of one and not another number?

I'm very very new to JS, I understand that the loopCounter has to be les than or equal to 3 for the code to execute, and also that it is incremented by one each loop, but the book is not clear on why the value of the variable has been set to 1.

If anybody could answer this question I would be very grateful, I hate moving onto the next stage of a book if I do not completely understand the previous topics.

Thank you in advance

Hello all.

I am faitly new at programming and have run into a little problem.

I want to create a script that creates 2 random numbers, stored in 2 different variables and then compare them to eachother.

there is two possible outcome of that comparison, either they are different or they are alike.

If they are different i want to randomize a new set or numbers and make a other comparement, also to keep track on how many times i have created numbers.

If they are alike i want to display the numbers and how many tries it took to get a matching pair.


atm it looks like this

<html>
<body>
<script>
var x=(Math.floor(Math.random()*6)+1);
var y=(Math.floor(Math.random()*6)+1);
//creates two random int between 1 and 6
var throws = 1;
//keep tabs on how many times we have thrown the dices

if(x!=y)
{
x=(Math.floor(Math.random()*6)+1);
y=(Math.floor(Math.random()*6)+1);
throws=throws+1
}else{
document.write("you have rolled a pair. Dice 1 is: " +x +" and Dice 2 is: " +y +" and it took " +throws +" tries to get a pair.");
}

</script>
</body>
</html>


How to get that into a loop?

a really confused newbie scripter

Hey guys i've just been following a few tutorials and learnt how to do a for loop and a while loop, what is the major difference between the two? they seem quite similar? I know while loops are laid out a hell of a lot easier in my opinion!

Hi All,

im trying to to use a for loop to loop through a drop down list of users and if there is a match between the user logged in and the drop down list i want to enable two fields, if the user logged in isnt in the drop down list i want to disable the two fields,

but im having trouble looping through, iv tried ".value" with no avail.. heres my Script

Code:

            var RequestingUser = document.getElementById('JoinersLeaversContent_cmbRequestingUser').text;
            var Authorisers = document.getElementById('JoinersLeaversContent_ddlAuthoriseId');
            for (var i = 0; i < Authorisers.length; i++) 
            {
                if (RequestingUser.text == Authorisers.value) {
                    document.getElementById('JoinersLeaversContent_txtAuthoriserSig').disabled = false;
                    document.getElementById('JoinersLeaversContent_txtDateSignedOff').disabled = false;
                }
                else 
                {
                    document.getElementById('JoinersLeaversContent_txtAuthoriserSig').disabled = true;
                    document.getElementById('JoinersLeaversContent_txtDateSignedOff').disabled = true;            
                }
           }

So just to be clear, if the user logged in appears in the drop down box i want to enable the two fields, if they dont appear i want to disable the two fields

Please help.

Thank you

I have the following code which is almost completely working the way I need it to with the exception of the "downloadFile" value...

Code:

/*Regex list of download file extensions, pipe and backslash delimited. Looks for the period before the file type so it will work on download links with query parameters after it */
var downloadTypes = /\.pdf|\.doc|\.xls|\.zip|\.csv|\.ppt|\.rtf|\.pptx|\.docx|\.xlsx|\.wmv|\.mpg|\.exe|\.mp3|\.rar|\.wav/i; 

/*Regex list of on-site domains, pipe and backslash delimited. */
var onsiteDomains = /\mytestdomain1\.com|\mytestdomain2\.com|javascript|#/i; 

/*Used to unobtrusivly add events to objects*/
function unobtrusiveAddEvent (element,event,fn) {
   var old = (element[event]) ? element[event] : function () {};
   element[event] = function () {fn(); old();};
}

var links = document.links;
if ( links ){
	for(var i=0; i<links.length; i++) {
		if( links[i].href.match(downloadTypes) ){
		unobtrusiveAddEvent( links[i], 'onclick' , function() { ntptEventTag('ev=download&eventPage=Download From: ' + escape( wa.currentDomain + wa.currentURL ) + '& downloadFile=' + escape( links[i] ) ); });
		}
		if( !links[i].href.match(onsiteDomains) ){
		unobtrusiveAddEvent( links[i], 'onclick' , function() { ntptEventTag('lk=1&ev=Exit Link'); });
		}
	}
}

...how do I grab the value of the href that was just clicked? links[i] is not working (it's just grabbing the href value of the last href in the loop). I am missing something simple for sure. Can anyone point out what I am missing?

Thanks!

For those who read my other thread I finally scratched together the code to take a value from an XML file and add it to a select box as an option. Ofcourse it only does it once so I need to loop it. It's kinda complex though, here's a function line to add one option:
addOption(document.people_form.People,name2,office2)

And here's the code in the head:

<script type="text/javascript">
//load xml file
if (window.ActiveXObject){
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false; //Enforce download of XML file first. IE only.
}
else if (document.implementation && document.implementation.createDocument)
var xmlDoc= document.implementation.createDocument("","doc",null);
if (typeof xmlDoc!="undefined")
xmlDoc.load("namedata.xml");

//Regular expression used to match any non-whitespace character
var notWhitespace = /\S/

function getnames(){
//Cache "messages" element of xml file
var nameobj=xmlDoc.getElementsByTagName("list")[0]

//REMOVE white spaces in XML file. Intended mainly for NS6/Mozilla
for (i=0;i<nameobj.childNodes.length;i++){
if ((nameobj.childNodes[i].nodeType == 3)&&
(!notWhitespace.test(nameobj.childNodes[i].nodeValue))) {
// that is, if it's a whitespace text node
nameobj.removeChild(msgobj.childNodes[i])
i--
}
}
}

if (typeof xmlDoc!="undefined"){
if (window.ActiveXObject) //if IE, simply execute script (due to async prop).
getnames()
else //else if NS6, execute script when XML object has loaded
xmlDoc.onload=getnames
}
var name2=xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue;
var office2=xmlDoc.getElementsByTagName("office")[0].firstChild.nodeValue;
var officePH2=xmlDoc.getElementsByTagName("officePH")[0].firstChild.nodeValue;
var mobile2=xmlDoc.getElementsByTagName("mobile")[0].firstChild.nodeValue;
var email2=xmlDoc.getElementsByTagName("email")[0].firstChild.nodeValue;
</script>
<script type="text/javascript">
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
</script>



Could anyone give me a pointer on how to loop this so that it loads one option after another from the XML file? Thanks.

I have a form that shows or hides divs based on what is chosen in a dropdown.

There are 4 divs but only one is shown and the other 3 hidden based on dropdown selection.

Inside each div are checkboxes with items for sale.

I want to reset the checkboxes to unchecked and the line total values to 0 if the div is hidden. I've got the checkboxes to reset but I can't figure out how to set the line total values to 0 (There are 14 total so I'm trying to loop thru all of them and reset them.)

This is what I have in the loop

Code:

	for (var i = 0; i < form.elements.length; i++ ) {
		if (form.elements[i].type == 'checkbox') {
			form.elements[i].checked = false;
 		}
	}
	 // set line_totals to 0
	 for (var j = 0; j< form.elements.length; j++ ) {
		if (form.elements [j].name.substring(0,10) == 'line_total') {
			form.elements[j].value = '';
 		}
	}

Trying to use a "for" loop to cycle through an array and compare values; if the values are equal, then it displays a message about the team, etc.

Code:

<html>

<head>
	<title>Javascript Colors!</title>
	
	<script type="text/javascript">
	
		var teamcolors = ["blue","orange","Auburn Tigers","Yuck!","black","red","Georgia Bulldogs","Congratulations!","yellow","black","Georgia Tech","Awesome!"]
																					
	
		function changeBGColor()
		{	document.body.bgColor = prompt("What color should the background be?","Put ANY color here!");
			checkForTeamColors();	
		}
			
		function changeTXTColor()
		{	document.getElementById("text").style.color = prompt("What color should the text be?","Put ANY color here!");
			checkForTeamColors();
		}
			
		function checkForTeamColors()
		{	var bgcolor = document.body.bgColor
			var txtcolor = document.getElementById("text").style.color
			var loopcount = 1
			
			while (loopcount <= 12)
			{	if (  (bgcolor == teamcolors[loopcount] && txtcolor == teamcolors[loopcount + 1]) || (bgcolor == teamcolors[loopcount + 1] && txtcolor == teamcolors[loopcount])  )
				{	alert("You have picked the team colors of " + teamcolors[loopcount + 2] + ". " + taemcolors[loopcount+3])	}
				loopcount = loopcount + 4;
			}
		}
	</script>	
			
			
			
			
</head>

<body>

	<p id="text" align="center">This text will change color if you want to. <br> Maybe try a certain combination, like Orange and Blue, or Red and Black?<br></p>

	<button onClick="changeBGColor()">Click me to change the BG Color!</button>
	<button onclick="changeTXTColor()">Click me to change the text Color!</button>
	
	<p id="variables"></p>
	
	<script type="text/javascript"
		document.getElementById("variables").innerHTML = ( bgcolor + "   " + txtcolor )
	
</body>

</html>

apparently this is supposed to be a loop...
I got it off another topic here and it made NOOOO sense

Code:

//dandavis's ES5 Array methods:
(function ArrayMethods(){var o=Array.prototype,it,i,
  e=eval('( {map:Z0,r=[];for(;i<m;i++){if(i in t){r[i]=a.call(b,t[i],i,t);}}return r;},filter:Z0,r=[],g=0;for(;i<m;i++){if(i in t&&a.call(b,t[i],i,t)){r[g++]=t[i];}}return r;},every:Z0;return m&&t.filter(a,b).length==m;},some:Z1;for(;m--;){if(m in t&&a.call(t,t[m],m,t)&&!--i){return true;}}return false;},lastIndexOf:Zb||-1;for(;m>i;m--){if(m in t&&t[m]===a){return l;}}return-1;},indexOf:Zb||0;for(;i<m;i++){if(i in t&&t[i]===a){return i;}}return-1;},reduce:Z0,r=b||t[i++];for(;i<m;i++){r=a.call(null,r,t[i],i,t);}return r;},reduceRight:Zm-1,r=b||t[i--];for(;i>-1;i--){r=a.call(null,r,t[i],i,t);}return r;},forEach:function(a,b){this.concat().map(a,b);return this;}})'.replace(/Z/g,"function(a,b){var t=this.concat(),m=t.length,i="));for(it in e){i=o[it];o[it]=i||e[it];}
}());//end ArrayMethods()

someone want to explain it to me?

here is some more

Code:

(function(){var o=Array.prototype,it,i,e={
	map:function(a,b){var t=this.concat(),m=t.length,i=0,r=[];for(;i<m;i++){if(i in t)r[i]=a.call(b,t[i],i,t)}return r},
	filter:function(a,b){var t=this.concat(),m=t.length,i=0,r=[],g=0;for(;i<m;i++){if(i in t&&a.call(b,t[i],i,t)){r[g++]=t[i]}};return r},
	every:function(a,b){var t=this.concat(),m=t.length,i=0;return m&&t.filter(a,b).length==m},
	some:function(a,b){var t=this.concat(),m=t.length,i=1;for(;m--;){if(m in t&&a.call(t,t[m],m,t)&&!--i){return!0}}return!1},
	lastIndexOf:function(a,b){var t=this.concat(),m=t.length,i=b||-1;for(;m>i;m--){if(m in t&&t[m]===a){return l}}return-1},
	indexOf:function(a,b){var t=this.concat(),m=t.length,i=b||0;for(;i<m;i++){if(i in t&&t[i]===a){return i}}return-1},
	reduce:function(a,b){var t=this.concat(),m=t.length,i=0,r=b||t[i++];for(;i<m;i++){r=a.call(null,r,t[i],i,t)}return r},
	reduceRight:function(a,b){var t=this.concat(),m=t.length,i=m-1,r=b||t[i--];for(;i>-1;i--){r=a.call(null,r,t[i],i,t)}return r},
	forEach:function(a,b){this.concat().map(a,b)}
};for(it in e){i=o[it];o[it]=i||e[it]}}()); //end Array.16 injection

it has something to do with eval... whats eval?

sigh I hate arrays this is so confusing to try and read ><

So I have a spreadsheet he GoogleDocs

The code I have is :
Code:

function addition() {
   // Declare Variables 
  var inputCell, outputCell, tempValueHolder;
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
   // Declare the range of the input numbers: Column C 
  var inputRange = sheet.getRange("C4:C41");
   // Declare the Range of where you want the output numbers: Column D 
  var outputRange = inputRange.offset(0, 1);
   // Calculate the column and row count. columns = 1, rows = 37 
  var colNum = inputRange.getNumColumns()-1;
  var rowNum = inputRange.getNumRows()-1;
   // Run the for loop 
   // There is only one column of data, C 
  for (var i=0; i<=colNum; i++);
  {
     // There are 37 rows of data, 4 through 41 
    for (var j=0; j<=rowNum; j++);
    {
       // Declare column and row info for cells 
      inputCell = inputRange.getCell(j,i);  //from Column C 
      outputCell = outputRange.getCell(j,i);  // to Column D 
       // Copy whatever is in Column D 
      tempValueHolder = outputCell.getValue();
       // Set Column D's cell to be whatever is in Column C PLUS what WAS in Column D 
       // It's just adding Column C's value to Column D's 
      outputCell.setValue(inputCell.getValue()+tempValueHolder);
       // Clear Column C 
      inputCell.clearContent();  
       // next row (supposedly) 
    }
  }
}

What I'm trying to do is take Values entered in the C column and add them to the existing number in column D of the same row. I do this from the starting cell: C4 down the rows to C41. Again, taking the value in C4 and adding it to D4... or C4+D4=newD4, all the way down to row 41.

So here's the problem. Whenever I run the function it only completes the last line in the loop, as in the last row (41). If I change the range from C4:C41 to C4:C#, it always only completes the loop with the # row. I can't figure out why. I have spent 6 hours JUST on this problem. Please someone with more knowledge help me. Thank you.