JavaScript - Changing For Loop To While Loop

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

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.

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 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 = '';
 		}
	}

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!

Hi all,
The following code is an assigment.I have it running with out any errors.It has to take the array (arrayToshuffle) and through running though the end of the (arrayToshuffle) the string has to be shuffled.We havent learnmt shuffle() yet.)
I think the problem is these lines.
arrayToShuffle[index]=arrayToShuffle[swapIndex]; arrayToShuffle[swapIndex]=arrayToShuffle[index];
But no matter what varibles I put in these lines and how much i fiddle I carnt seem to get it to run without repeating the same elements in the output.
I dont want anyone to fix it for me just advise on where I could look for problems.
Am i missing somthing here?
Heres the program if you run it you will see what I mean.


<html>
<head>
<script>
var arrayToShuffle = new Array('Ace','2','3','4','5','6','7','8','9','10','Jack','Queen','King');
var arraySize = arrayToShuffle.length;

document.write('<h1>Array shuffling</h1>');
document.write('<p>Before shuffle: '+arrayToShuffle+'</p>');

SWAPS_TO_MAKE = 30;


var index=0;
var self_swaps=0;
var counter = 0;

while(counter < SWAPS_TO_MAKE)
{
var swapIndex = Math.floor(Math.random()*arraySize+1);
arrayToShuffle[index]=arrayToShuffle[swapIndex];
arrayToShuffle[swapIndex]=arrayToShuffle[index];
if(index =swapIndex) {
self_swaps++;
}
counter++;
index = (index+1 % arraySize);
}

document.write('<p>After shuffle: '+arrayToShuffle+'</p>');
document.write('<ul>');
document.write('<li>Swaps made: '+SWAPS_TO_MAKE+'</li>');
document.write('<li>Self swaps: '+self_swaps+'</li>');
document.write('<li>Effective swaps: '+(SWAPS_TO_MAKE-self_swaps)+'</li>');
document.write('<li>Effective rate: '+((SWAPS_TO_MAKE-self_swaps)/SWAPS_TO_MAKE)+'</li>');
document.write('</ul>');

</script>
</head>
<body>

</body>
</html>

Thanks heaps
Shayne Darcy

I need the rolling and the displaying in a loop and i am clueless. If anyone could help it would be much appreciated.






<html>
<head>
<title> Die Rolls </title>
<script type="text/javascript" src="http://balance3e.com/random.js">
</script>
<script type="text/javascript">
function RollDice()
{
var roll1, roll2, roll3, roll4, roll5;

roll1 = RandomInt(1, 6);
roll2 = RandomInt(1, 6);
roll3 = RandomInt(1, 6);
roll4 = RandomInt(1, 6);
roll5 = RandomInt(1, 6);

document.getElementById('die1Img').src =
'http://balance3e.com/Images/die' + roll1 + '.gif';
document.getElementById('die2Img').src =
'http://balance3e.com/Images/die' + roll2 + '.gif';
document.getElementById('die3Img').src =
'http://balance3e.com/Images/die' + roll3 + '.gif';
document.getElementById('die4Img').src =
'http://balance3e.com/Images/die' + roll4 + '.gif';
document.getElementById('die5Img').src =
'http://balance3e.com/Images/die' + roll5 + '.gif';

document.getElementById('rollSpan').innerHTML =
parseFloat(document.getElementById('rollSpan').innerHTML) + 1;
}
</script>
</head>

<body bgColor="lime">
<div style="text-align:center">
<p>
<img id="die1Img" alt="die image"
src="http://balance3e.com/Images/die1.gif">
<img id="die2Img" alt="die image"
src="http://balance3e.com/Images/die2.gif">
<img id="die3Img" alt="die image"
src="http://balance3e.com/Images/die3.gif">
<img id="die4Img" alt="die image"
src="http://balance3e.com/Images/die4.gif">
<img id="die5Img" alt="die image"
src="http://balance3e.com/Images/die5.gif">
</p>
<input type="button" value="Click to Roll" onclick="RollDice();">
<hr>
<p>
Number of rolls: <span id="rollSpan">0</span>
</p>
</div>
</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 ><

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>

I have a checkbox with an id="chk" and a html table (myTable) loaded from a query where one of the columns is the record status (td id="RecStatus"). When I click the checkbox "on", I'm calling a function that I want to go through all records in the table and hide the ones with a RecStatus of "closed". Here's what I have thus far; I know I'm very close but I'm having issues building my array.

Code:

function killSomeRows(){
var cell=document.getElementById("RecStatus");
var tbl=document.getElementById("myTable");
var numRows=tbl.rows.length;
var row=document.getElementById("displayRow");
var i=0
//myArray is set to the # of Rows in my table
var myArray = new Array(numRows);
//I start my for loop and this is where I am lost

for (i=0; i<=numRows; i++){

//In here I want to go through each row in my table and if the "RecStatus" cell = 'Closed' and my checkbox.checked==true, I want to change the style.display = 'none'.
//else I want those rows with a RecStatus of 'Closed' to be visible 
//using style.display = ''

if (RecStatus == 'Closed' && chk.checked==true)
document.getElementById(row where status is closed).style.display = 'none';
else 
document.getElementById(row where status is closed).style.display = '';
}
}

I can get it to hide the 1st record in the table if that record is closed when I click/unclick the checkbox but it appears I do not have the array set up and then the for loop is not going through each record in the array.

I'm at a loss....I'm very new to javascript and have been looking at this all day. Any help is appreciated...thanks

Cypress

Hi all,

I have a problem where I'm trying to load data into multiple divs. They are payslips, so p1, goes into january, p2 into febuary etc. I want to onLoad them all so when the page is loaded they are all displayed.

Every time I try this, the loop automatically goes to the last iteration, 6 in this example, so the only div that is loaded is p6.

Here is my code:

function replace(slip, year) { // table contains either 'bank' or 'intranet'

xmlHttpReq.open("POST", "do_payslips_ajax.php", true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange=function() {

if(xmlHttpReq.readyState == 4) {

document.getElementById("p" + slip).innerHTML = xmlHttpReq.responseText;

}
}

xmlHttpReq.send(getquery(slip,year));

}

function getquery(slip,year) {

strQuery = "weekmonth=" + slip + "." + year;
return strQuery;

}

function loadpayslips(year) {

for (slip=1; slip<=6; slip++) {

replace(slip, year);

}

}

<label>
<body onload = loadpayslips(11)> search</a> &nbsp;&nbsp;
</label>

<div id="p1">
/div>

<div id="p2">
month 2</div>

<div id="p3">
month 5</div>

etc..

Any help would be appreciated.
Thanks

Hello,

I need to do this. I have 36 Divs called "contenido1, contenido2, contenido3 etc.)

And I want that "onclick" change a property of the css of all of them except 1. I know I can do this manually but its a lot of code lines so I think it would be another option to do ir in a loop.

Right now i am using this:

Code:

div = document.getElementById('contenido1');
div.style.display='block';
div = document.getElementById('contenido2');
div.style.display='none';
div = document.getElementById('contenido3');
div.style.display='none';
div = document.getElementById('contenido4');
div.style.display='none';
....

So in that case I want for example that all the DIVS called "contenido 2 to contenido 36" display: none and only contenido 1 display block. In the next cases would be the same: All the divs called "contenido 1 to contenido 36" display: none except "contenido 2" that i want to display: block.

So I can do it like this but are thousands of lines of code... and I am sure there are other more efficient option.

Anybody knows how to do that? Probably is a simple question.

Thank you!!

Hi friends

i have a gridview with id gvcustomers...it has tow columns latitudes and longitudes

i want to loop thoiugh the gridview on the client side and get the values

like this...but the problem i have is mentioned in the comments below


var theGridView = document.getElementById('<%=gvCustomers.ClientID%>');

for (var rowCount = 1; rowCount < theGridView.rows.length; rowCount++) {


/// the numbers in the array are lats and longs which are hard //coded...this where i want the latitude and longitude colmn to come..
var latlongs = new Array(new VELatLong(45, -110), new VELatLong(45, -114), new VELatLong(45, -90), new VELatLong(45, -95));



// }

How can i achieve this...thank you

akpaga
Senior Apprentice
Senior Apprentice
LTD Bronze - Rating: 3

Posts: 167
Joined: Wed May 27, 2009 4:15 pm

Unrated

Hi all!

I've been trying to figure this one out but am scratching my head.....

So here's what I'm trying to do. Creat a continuous text fade-in / fade-out

Basically I'm going to have a banner at the top of a page that loops through text from a db.

So, I get my data and create the divs and a csv that I pass to js as an array, all good, that works.

This is what it would look like:

Code:

<div id="div_one">
    Text 1......
</div>
<div id="div_two">
    Text 2......
</div>
<div id="div_three">
    Text 3......
</div>

And then the js array is Array('div_1,'div_2','div_3') etc

Now, this is where I'm getting mixed up, I want to loop that array of div id's and fade them in / out one by one, but I can;t seem to figure it out....

Here's what I've tried:

Code:

loop_running = false;
function start_loop(){
	loop_running = true;
}

function end_loop(){
	loop_running = false;
}
function loop(arr){
if(arr.length > 0){
		
		for(i=0;i<arr.length;i++){
			 if(loop_running == false){
				 // set loop_running var to true
				 start_loop();
				 // fade in div
				 fadeIn(arr[i], 1000);
				 // pause for 3 seconds then fade out
				 var t = setTimeout("fadeOut('"+arr[i]+"'), 1000", 3000);
				 // now set another timer to end the loop after 5 seconds
				 var e = setTimeout("end_loop()", 5000);
			 }
			 // now check to see if we're at the end of our array, if we are we need to call this function again to repeate
			 if(i == arr.length){
				 // repeat
				 loop(arr);
			 }
		}
		
	}
}

But that just gets the first div and then stops after fading out....

I've tried other variations too but with no avail..... I need to be able to tell the for loop to take 5 seconds for every one, so as it's looping it'll get the first div (first one in the aray), fade it up over one second, pause for 3 seconds then fade out, then get the next index in the array and do it again until it gets to the end of the array then it'll repeat.

Does anyone know what's wrong with the logic i'm using? I can't for the life of me see how to get this working.

Any advise will be gratefully received as always!