|
JavaScript - Recursive Function With For Loop, For Loop Is Breaking When Calling Itself
Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together.
What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array. What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created. Here is the test object: Code: test = [
{
"name" : "Menu 1",
"url" : "menu1.html",
"submenu" : [
{
"name" : "menu 1 subitem 1",
"url" : "menu1subitem1.html"
},
{
"name" : "menu 1 subitem 2",
"url" : "menu1subitem2.html"
} ]
},
{
"name" : "Menu 2",
"url" : "menu2.html",
"submenu" : [
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
},
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
} ]
},
{
"name" : "Menu 3",
"url" : "menu3.html",
"submenu" : [
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
},
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
} ]
}
];
Here is the recursive function: Code: function buildMenuHTML(menuData,level) {
var ul;
if (level == 1) {
ul = "<ul id='menu'>";
} else {
ul = "<ul class='level" + level + "'>";
}
for (i = 0; i < menuData.length; i++) {
menuItemData = menuData[i];
ul += "<li>";
ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>";
if (typeof menuItemData.submenu != 'undefined') {
ul += buildMenuHTML(menuItemData.submenu,level + 1);
}
ul += "</li>";
}
ul += "</ul>";
return ul;
}
Here is how the function is called initially: Code: buildMenuHTML(test,1); This is it's return value (with indentation added for readability): Code: <ul id='menu'>
<li><a href='menu1.html'>Menu 1</a>
<ul class='level2'>
<li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li>
<li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li>
</ul>
</li>
</ul>
'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated. Similar TutorialsHi Everyone, I am not able to figure out why the function "changeDiv(the_div,the_change)" is not called from the for loop in the function displayUsers(keeper)that I generated. The displayUsers is written to get rid of excess code in the function display(keeper). Can someone, please point out what the mistake is? Code: function changeDiv(the_div,the_change)
{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = the_change;
}
}
function getStyleObject(objectId)
{
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else {
return false;
}
}
//Shows input information for # of users selected
function displayUsers(keeper)
{
var display=keeper;
var i,user;
for(i=1;i<= display;i++)
{
user="user"+i;
changeDiv('user','block');
}
}
/*function display(keeper)
{
if (keeper == 1)
{
changeDiv('user1', 'block');
changeDiv('user2', 'none');
changeDiv('user3', 'none');
changeDiv('user4', 'none');
changeDiv('user5', 'none');
changeDiv('user6', 'none');
changeDiv('user7', 'none');
changeDiv('user8', 'none');
changeDiv('user9', 'none');
changeDiv('user10','none');
}
else if (keeper == 2)
...
...
...
else
{
changeDiv('user1', 'none');
changeDiv('user2', 'none');
changeDiv('user3', 'none');
changeDiv('user4', 'none');
changeDiv('user5', 'none');
changeDiv('user6', 'none');
changeDiv('user7', 'none');
changeDiv('user8', 'none');
changeDiv('user9', 'none');
changeDiv('user10','none');
}
}// end function display(keeper)*/
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#status
{
background-color:#FF0;
width: 300px;
height: 150px;
overflow:scroll;
margin-top: 25px;
}
#money
{
position:absolute;
left: 325px;
top: 416px;
}
</style>
<script type="text/javascript">
function Machine()
{
this.getCash = function()
{
var i = 0;
var rand = 0;
while (i < 2)
{
t = setTimeout("rand = Math.ceil(Math.random() * 4 )", 1000);
alert(rand);
i++;
}
clearTimeout(t);
}
}
var soda = new Machine();
soda.getCash();
</script>
</head>
<body>
<div style="margin-bottom:25px">
Soda Machine.
<p>_________________</p>
1. Earn Money
<br />
2. Buy Soda
</div>
<table>
<thead>
<th>Soda</th>
<th>Price</th>
<th>Buy</th>
</thead>
<tbody>
<tr>
<td>
Basic Fizz
</td>
<td>
$5
</td>
<td>
<input type="button" id="b_fizz" value="Buy Basic Fizz" />
</td>
</tr>
<tr>
<td>
Advanced Fizz
</td>
<td>
$11
</td>
<td>
<input type="button" id="a_fizz" value="Buy Advanced Fizz" />
</td>
</tr>
<tr>
<td>
The Good Stuff
</td>
<td>
$17
</td>
<td>
<input type="button" id="cc_fizz" value="Buy Coca Cola" />
</td>
</tr>
</tbody>
</table>
<div id="status">
<p style="margin-top:0">Status Window: </p>
</div>
<input type="text" id="money" value="$0" disabled="disabled" />
<input type="button" id="earn" value="Earn Cash" />
</body>
</html>
Basically, what I'm trying to do is get a random number every second for 2 seconds automatically so that in the status window it says: "You earned $2" "You earned $3" ....etc. But my random number keeps showing up as 0. I know I'm probably overlooking something as far as closures...can someone please enlighten me? Check the javascript code tried this also..same result for everything I try: D: Code: function Machine()
{
this.rand = 0;
this.r = function()
{
this.rand = Math.ceil(Math.random() * 4);
}
this.getCash = function()
{
var i = 0;
while (i < 3)
{
t = setTimeout("this.r()", 1000);
alert(this.rand);
i++;
}
clearTimeout(t);
}
}
var soda = new Machine();
soda.getCash();
I'm hoping someone can help correct a small problem with this script, which is intended to highlight particular text strings. Background: The script is being used at a MediaWiki site, and is adapted from a working script from Wikipedia (highlightmyname.js). The original script highlights the logged-in user's username (represented by wgUserName). I've made a copy of the script, which you can see in full here, and adapted it to work on a pre-defined array of names, adding: Code: var Admin; var ArrayAdmins = ['Adam', 'Axiomist', 'Matt', 'Steve']; for (Admin in ArrayAdmins) I also replaced each instance of wgUserName with ArrayAdmins[Admin] The problem: is that, instead of highlighting all instances of every element in ArrayAdmins, only the last element listed ('Steve') is being used. So my question is, what change(s) need to be made to apply function highlightmyname to every element in ArrayAdmins? Any help would be hugely appreciated! Hi all I'm well aware that I can't post assignments here and expect an answer, however, I have been staring at this code for so long. I feel I am close to the solution (to get the correct output to the browser) but I just cannot get it to count how many moves it takes. I don't want an answer, but a nudge in the right direction would be very grateful. As you can see from the code and the output, it will attempt to write to the browser how many moves, but only '0'. Code: function rollDie()
{
return Math.floor(Math.random() * 6) + 1;
}
/*
*searches for a number in a number array.
*
*function takes two arguments
* the number to search for
* the number array to search
*function returns the array index at which the number was found, or -1 if not found.
*/
function findIndexOf(number, numberArray)
{
var indexWhereFound = -1;
for (var position = 0; position < numberArray.length; position = position + 1)
{
if (numberArray[position] == number)
{
indexWhereFound = position;
}
}
return indexWhereFound;
}
//ARRAYS that represent the board -- you do not need to change these
//array of special squares
var specialSquaresArray = [1,7,25,32,39,46,65,68,71,77];
//array of corresponding squares the player ascends or descends to
var connectedSquaresArray = [20,9,29,13,51,41,79,73,35,58];
//VARIABLES used -- you do not need to change these
//the square the player is currently on
var playersPosition;
//play is initially at START
playersPosition = 0;
//what they score when they roll the die
var playersScore;
//the index of the player's position in the special squares array or -1
var indexOfNumber;
//MAIN PROGRAM
//TODO add code here for parts (iii), (iv)(b), (v), and (vi)
// start of question(iii)
playersScore = rollDie();
document.write(' Sco ' + playersScore);
playersPosition = playersScore + playersPosition;
document.write(', Squa ' + playersPosition);
indexOfNumber = findIndexOf(playersPosition, specialSquaresArray);
if (indexOfNumber != -1)
{
document.write(', Ladder to Squa ' + connectedSquaresArray[indexOfNumber]);
playersPosition = connectedSquaresArray[indexOfNumber];
indexOfNumber = -1;
}
document.write('<BR>')
// end of question(iii)
// start of question(iv)(b)
while(playersPosition<=80)
{
playersScore = rollDie()
document.write(' Sco ' + playersScore)
playersPosition = playersPosition + playersScore
document.write(', Squa ' + playersPosition)
indexOfNumber = findIndexOf(playersPosition, specialSquaresArray)
if(indexOfNumber != -1)
{
document.write(', Ladder to Squa ' + connectedSquaresArray[indexOfNumber]);
playersPosition = connectedSquaresArray[indexOfNumber];
}
document.write('<BR>');
}
var countMoves = 0;
while(countMoves <= 0)
{
document.write('You took ' + countMoves + ' moves to get out');
countMoves = countMoves + 1
}
/*for (var countMoves = 0; countMoves < playersPosition; countMoves = countMoves + 1)
{
countMoves = countMoves + playersPosition;
document.write('You took ' + countMoves + ' moves to get out');
}*/
// end of question(iv)(b)
// start of question (v)
/*if (playersPosition >=80)
{
document.write('The player is out');
}*/
// end of question (v)
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Many thanks. Here's the code: Code: for (var i = 1; i < 5; i++)
var pl = eval("player" + i)
var namepl = eval("document.charInput.name" + i + ".value");
var skillpl = eval("document.charInput.skill" + i + ".value");
var genderpl = eval("document.charInput.gender" + i + ".value");
switch (skillpl) {
case "warrior":
pl = new player(namepl, skillpl, genderpl, 20, 15, 0, 5, 5, 2, 2, 3, 3, 0, 0);
logEntry("black", namepl + " is now a warrior.");
break;
case "mage":
pl = new player(namepl, skillpl, genderpl, 15, 10, 20, 2, 5, 5, 5, 2, 3, 0, 0);
logEntry("black", namepl + " is now a mage.");
break;
case "healer":
pl = new player(namepl, skillpl, genderpl, 15, 10, 20, 2, 5, 5, 5, 2, 3, 0, 0);
logEntry("black", namepl + " is now a healer.");
break;
case "archer":
pl = new player(namepl, skillpl, genderpl, 20, 15, 0, 3, 3, 2, 2, 5, 5, 0, 0);
logEntry("black", namepl + " is now an archer.");
break;
}
}
Each player has three form values: document.charInput.name1.value document.charInput.skill1.value document.charInput.gender1.value In the case of the 2nd-4th player, it changes to name2.value, etc. Based on these three inputs, I need to iterate through all four players and make the player object for each of them, as I've done above. If anybody has any ideas on how to correct this or an alternative method, please help. Hey, I'm attempting to add functuallity to some code and have been having problems getting loops to create variables that are usable. I know the actual programming seems rather redundant as im creating a variable for each div then looping it to create each div, but it is the only way i can get it to work with other parts of the website. So the actual code takes the variables defining the content of each div and uses the loop to actually produce the divs. I am having problems with the + "linkdiv" + x + part of the actual loop. however way i try to define the variable it simply prints the "linkdiv1" or "linkdiv2" ect... rather then referencing the earlier variable that was created and printing "div1". is this even possible in javascript? The whole whing works when i reference a variable directly, just not when i try to use a loop to create the reference for me. If i use a variable directly i get 5 of the same references rather than one of each reference which is not what i want. please note thati define the colour1 and colour2 variables along with the rest of the actual code earlier in the function... Code:
var linkdiv1="<p style=\"color:"+ colour1+"\">div1</p>"
var linkdiv2="<p style=\"color:"+ colour1+"\">div2</p>"
var linkdiv3="<p style=\"color:"+ colour1+"\">div3</p>"
var linkdiv4="<p style=\"color:"+ colour1+"\">div4</p>"
var linkdiv5="<p style=\"color:"+ colour1+"\">div5</p>"
<!----------------------------------------------------------------->
for (x = 1; x <= 5; x++)
{
document.write("<div style=\""+colour1+"\" id=\"div"+x+"\">" + "linkdiv" + x + "</div>")
}
feel free to ask for more infomation or more code as im not even sure if this makes enough sense to answer the question. Having troubles writing this in a way thats easily understood as i had to take a lot of code that wasnt relevent out. thanks... hi i'd like to ask how can i ask for a function inside a for loop , if i remove the loop the code works fine but i need it for 10 rows . please help , here is the code PHP Code: $content .=' <table cellspacing="2" cellpadding="2" border="0" align="center" > <SCRIPT LANGUAGE="JavaScript" type="text/JavaScript"> function doCalcAndSubmit() { // get both values kolicina1 = document.forms["vlez1"].kolicina.value; cena1 = document.forms["vlez1"].cena.value; // do some calculation vkupno1 = kolicina1 * cena1; // set the value in the right field document.forms["vlez1"].vkupno.value = vkupno1; } </script> <form id="vlez1" name="vlez1" method="POST" action="index_execute.php" > <tr valign="middle"> <td></td> <td align="center"><b> Sifra : </b></td> <td align="center"><b> Kolicina : </b></td> <td align="center"><b> Cena : </b></td> <td align="center"><b> Vkupno : </b></td> </tr> '; for($t=1;$t<11;$t++) { $content .= ' <tr valign="middle"> <td>'.$t.'.</td> <td><input type="text" id="sifra" autocomplete="off" name="sifra['.$t.']" align="middle" onblur="normalField(this);" onfocus="fireKeyListener_sifra(event); highlightField(this,1);" onkeyup="getList_sifra(event);" size="25" value="" /></td> <td><input type="text" id="kolicina" name="kolicina['.$t.']" align="middle" size="25" ></td> <td><input type="text" id="cena" name="cena['.$t.']" align="middle" size="25" onblur="doCalcAndSubmit();"></td> <td><input type="text" id="vkupno" disabled name="vkupno['.$t.']" align="middle" size="25" ></td> <input type="hidden" name="hidden_data" value="'.$data.'"> </tr>'; } $content .= '<tr> <td></td> <td></td> <td align="center"><input type="submit" id="submit2" name="submit2" value="Potvrdi" ></td> </tr> </form> </table> '; Hi, I hope someone can help me figure this out - it's been bugging me for a whole day now, and I can't seem to figure it out, and so far no Google research found this exact problem for me... Situation: I have a simple HTML page with one DIV element with the id "rotator". Inside that, JavaScript is supposed to create boxes that react to mouseovers. The weird thing is: The whole script works, but ONLY on the LAST box I create, no matter what I do. I can manually add the mouseover code to any one of these boxes, but it will only take on the last one. I can have JavaScript tell me the mouseover status of each box, and they all tell me they have code assigned correctly - but again only the last one works... Here's the relevant code (yes, highly abbreviated, but it's the part that fails on me): Code: var maxBoxes = 10;
function initSite() {
var rotator = document.getElementById("rotator");
rotator.innerHTML = "";
for (x = 0; x < maxBoxes; x++) {
rotator.innerHTML +='<div id="myBox' + x + '"></div><div id="myDark' + x + '"></div>';
// various other stuff about myBoxes[x] also in here, but not relevant to the issue I think
applyMouseActions(document.getElementById("myDark" + x);
debugOutput(document.getElementById("myDark" + x).id+"=" + document.getElementById("myDark" + x).onmouseover + "<br>", 1);
}
}
function applyMouseActions(item) {
if (!item) return;
item.onmouseover = function(ev) {
alert("does this work?");
var thisNum = this.id;
thisNum = thisNum.charAt(this.id.length-1);
var tempBox = myBoxes[thisNum].boxOb;
tempBox.style.background = "#fff";
}
item.onmouseout = function(ev) {
var thisNum = this.id;
thisNum = thisNum.charAt(thisNum.length-1);
var tempBox = myBoxes[thisNum].boxOb;
tempBox.style.background = "#aaa";
}
}
initSite is called in the body onload. All kinds of other animation parts are implemented that work fine, just this mouseover won't work. I have tried re-writing it in multiple different ways, including "xyz.onmouseover = myMouseCode" and then defining the function separately later - still no dice. So, the code creates 10 boxes (0-9) and 10 boxes that are on top of them to create a form of shadow effect depending on the position of the original boxes. Since the "myDark" boxes are on top of the "myBox" boxes, I apply the onmouseover onto the "myDark" boxes, but it only works on "myDark9" and no other box. They are all created the same way, the mouseover assigned the same way... All I can do is shake my head at it, but that doesn't fix the issue, obviously ;-) Any idea what else I can try? Thanks! Hi, I have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs... Here is how I tried to do that: Code: <script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
targetElement.innerHTML = "" ;
}
</script>
Code: $hide = "";
while($ligne=mysql_fetch_array($ress)){
$hide.= "visibilite('$ligne[id]'); ";
$return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>";
$return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>";
$return.= "</div></td></tr>";
}
Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not... Does somebody can help me? Thanks a lot! Jeff I'm trying to make it so when you click a cell in a table it runs a function based on the value within that cell. With the current code, no matter what cell is clicked, the alert box displays the same number, which is the last number in my array. The variable, princ, is just being overwritten rather than writing code to each the cell with the proper value. Help is appreciated. Thanks. Code: for(i=0;i<=3;i++){
document.writeln('<tr>');
document.writeln('<th>'+(periodArray[i])+'</th>');
for(j=0;j<=2;j++){
princ = principleArray[j][i];
document.writeln('<td onclick="(calculateInterest(princ,1,1))">$'+principleArray[j][i]+'</td>');
}
document.writeln('</tr>');
}
function calculateInterest(principle,rate,period){
totalInterest = principle * rate * period;
totalLoanCost = principle + totalInterest;
alert('Total Interest: '+totalInterest+'\n'+'Total Loan Cost: '+totalLoanCost);
}
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
}
}
I am trying to create a simple auto-calculate function for a webpage. What should be happening: The 'onchange' command should pass the 'price' of the item to the function, the function should then cycle through all the dropdowns (or checkboxes or fields) and calculate the total. What is happening: It is only picking up the last checkbox. It seems that the 'for' loop only remembers the last item in the array. What am I doing wrong? How can I get the code to remember all the items? thanks, Code: <script language="JavaScript" type="text/javascript">
function calculateTotal(price)
{
var total = 0;
var cList = ['sel1','sel2','sel3'];
for (i=0;i<2;i++);
var select = GetE(cList[i]); total+= price * (select.options[select.selectedIndex].value);
GetE("totalShow").innerHTML = total.toFixed(2);
}
function GetE(id) {return document.getElementById(id); }
</script>
<html>
<head></head><body>
<form id="form1" name="form1" method="post" action="">
<select name="sel1" id="sel1" onchange="calculateTotal(100)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
<select name="sel2" id="sel2" onchange="calculateTotal(200)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
<select name="sel3" id="sel3" onchange="calculateTotal(300)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
</form>
<br>total <span id="totalShow">0.00</span>
</body></html>
it wont loop, as long as you enter something in the name field it will submit. also how do i stop from submitting if all fields are not filled out? any help will be appreciated) ====== function checkForm(form) { var len = form.elements.length; var h=0; for (h=0; h<=len; h++){ if ((form.elements[h].value==null) || (form.elements[h].value=="")){ alert("Please enter "+document.myForm.elements[h].name); document.myForm.elements[h].focus(); return false; } return true; } } ===body-== <FORM NAME="myForm" METHOD="post" ACTION="http://ss1.prosofttraining.com/cgi-bin/process.pl"> Name:<BR> <INPUT TYPE="text" size="30" NAME="name"><br> Email address:<BR> <INPUT TYPE="text" size="30" NAME="email address" onBlur="emailTest(this);"><br> Phone number:<BR> <INPUT TYPE="text" size="30" NAME="phone number"><br> Fax number:<BR> <INPUT TYPE="text" size="30" NAME="fax number"><p> <INPUT TYPE="submit" VALUE="Submit Data" onClick="return checkForm(this.form);"> <INPUT TYPE="reset" VALUE="Reset Form"> </FORM> 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 am trying to display some images in, say, 500ms intervals, but I want to loop through images, so I use a for loop and setTimeouts and function calls... Code: for (i=0;i<=5;i++)
{
setTimeout(DisplayTheImage, 500);
}
(a var that increments the image like image[x] is somewhere else) but I think all I accomplish is that while the above code calls the function 5 times alright, all five function calls occur simultaneously. Right? Eh, I want the function to be called 5 times, but at five different times, namely in 500ms intervals. I thought the function would wait to finish (500 ms) then another call and so on. How can I do that? Had no replies to my previous post ! http://www.codingforums.com/search.php?searchid=6740324 I have tried to manipulate some (pretty complex) code for reading external code seen here on CF but there was nothing on doing this in a "For Loop" so had no real success Can anyone assist ? Most Kind Function to Read-In External "XML" datafiles on For Loop Can anyone help ? see: http://www.jcsweb.biz/mef/AnimGIF/XMLtemp_04c.htm for required output Javascript Function required: To read in 7 successive "XML" files (not pure XML format & held in "Gallery/Data" external dir in a For Loop: (US_SUMlev_2008.xml,US_SUMlev_2009.xml.....to US_SUMlev_2014.xml) These XML then succesively update a string variable "strXML" which forms the "data" populating a time-series chart. "strXML" then acts as the input to "setDataXML" which is the Chart's data update method (?) The sequential updating of "strXML" in a For Loop should the create a psuedo-animation effect in the chart. My code (see below in edited format or view source at above URL) will achieve what I want but the "strXML" variable update is currently HARD-CODED (rather than read from the XML files held in external directory "Gallery/Data" ). The required function will also need to strip out all linbreaks ("\n") from the external XML files in order to produce a single line of stringtext: eg HTML Code: Code: <chart animation='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column' dashed='1'><set value='0.000000' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /></dataset></chart> The sequential updating of "strXML" is also NOT yet done in a For Loop but a fixed timing Animate() function which successivley activates the generateXML_200?() on a timedelay. Summary: Required Runstream in Function For Loop: Loop1: Read-in "Gallery/Data/US_SUMlev_2008.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1 Loop2: Read-in "Gallery/Data/US_SUMlev_2009.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1 etc etc until Loop7: Read-in "Gallery/Data/US_SUMlev_2014.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1 If there was a way to "Freeze" and "Restart" this above function (ie pause the read-in of the next XML) as in current code that would be mighty fine too. Any help much appreciated Code: Code: <HTML>
<HEAD>
<script language="Javascript" SRC="FC_v3_2.js"></script>
<script language="JavaScript">
var strXML;
function generateXML_2008(){
strXML = "<chart animation='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column' dashed='1'><set value='0.000000' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /></dataset></chart>" ;
return strXML; }
function generateXML_2009(){ TRUNCATED - extends data by 1 year}
function generateXML_2010(){ TRUNCATED - extends data by 1 year}
function generateXML_2011(){ TRUNCATED - extends data by 1 year}
function generateXML_2012(){ TRUNCATED - extends data by 1 year}
function generateXML_2013(){ TRUNCATED - extends data by 1 year}
function generateXML_2014(){
strXML = "<chart animation='0' showValues='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column'><set value='0.000000' /><set value='-0.055113' /><set value='-0.022272' /><set value='0.052834' /><set value='0.029910' /><set value='0.016847' /><set value='0.003139' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /><set value='0.000470' /><set value='-0.009643' /><set value='0.004135' /><set value='0.000321' /><set value='0.000019' /><set value='-0.000719' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /><set value='0.142439' /><set value='0.130952' /><set value='0.102297' /><set value='0.083231' /><set value='0.062888' /><set value='0.043371' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /><set value='0.238348' /><set value='0.000000' /><set value='0.002127' /><set value='0.001261' /><set value='0.011962' /><set value='0.015624' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /><set value='-0.000155' /><set value='-0.006479' /><set value='-0.007280' /><set value='-0.000895' /><set value='0.003701' /><set value='0.005333' /></dataset></chart>" ;
return strXML; }
</script>
<script language="JavaScript">
function UpdatestrXML_2008(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2008()); } //Update XML going to Fusion charts
function UpdatestrXML_2009(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2009()); } //Update XML going to Fusion charts
function UpdatestrXML_2010(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2010()); } //Update XML going to Fusion charts
function UpdatestrXML_2011(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2011()); } //Update XML going to Fusion charts
function UpdatestrXML_2012(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2012()); } //Update XML going to Fusion charts
function UpdatestrXML_2013(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2013()); } //Update XML going to Fusion charts
function UpdatestrXML_2014(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2014()); } //Update XML going to Fusion charts
</script>
<script language="JavaScript">
var start = 250 ;
var delay = 350
// var delay = 2000
function Animate() {
t1_2008=setTimeout("javascript:UpdatestrXML_2008();", start+delay*1 ) ;
t1_2009=setTimeout("javascript:UpdatestrXML_2009();", start+delay*2 ) ;
t1_2010=setTimeout("javascript:UpdatestrXML_2010();", start+delay*3 ) ;
t1_2011=setTimeout("javascript:UpdatestrXML_2011();", start+delay*4 ) ;
t1_2012=setTimeout("javascript:UpdatestrXML_2012();", start+delay*5 ) ;
t1_2013=setTimeout("javascript:UpdatestrXML_2013();", start+delay*6 ) ;
t1_2014=setTimeout("javascript:UpdatestrXML_2014();", start+delay*7 ) ;
LOOP =setTimeout("javascript:Animate();", start+delay*8) ; }
</script>
<script language="JavaScript">
function FreezeAll() { clearTimeout(t1_2008); clearTimeout(t1_2009); clearTimeout(t1_2010); clearTimeout(t1_2011); clearTimeout(t1_2012); clearTimeout(t1_2013); clearTimeout(t1_2014); clearTimeout(LOOP); }
</script>
</HEAD>
<body onload="Animate();" >
<FORM NAME='Form1' Id='Form1' action='' method=''>
<INPUT TYPE="button" class="button" value="Animate" onClick="Animate(); ">
<INPUT TYPE="button" class="button" value="Freeze" onClick="FreezeAll();">
</FORM>
<div id="chart1div"> FusionCharts </div>
<script language="JavaScript">
var chart1 = new FusionCharts("MSColumnLine3D.swf", "chart1Id", "600", "400", "0", "1");
chart1.setDataXML("<chart></chart>"); //Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event.
chart1.render("chart1div");
</script>
</body>
</HTML>
First post here so... I have a few functions called by a form. Two examples are onclick in a form input and onkeyup in a form button. Code: function checkUsernameForLength(whatYouTyped) {
var fieldset = whatYouTyped.parentNode;
var txt = whatYouTyped.value;
if (txt.length > 2) {
fieldset.className = "welldone";
return true;
}
else {
fieldset.className = "";
return false;
}
}
Code: onkeypress="checkUsernameForLength(this);" There are a couple of the above "validation" functions. Each sets an input fieldset's class. Code: function verifyit() {
var fieldsets = document.getElementsByTagName("fieldset");
var i=0;
while (i<count(fieldsets)){
if (fieldsets[i] != "") {
i++;
document.form.submit();
}
}
}
Code: onclick="verifyit()" The function above is where I'm having the trouble. I want to iterate through the fieldsets and make sure each class isn't blank before allowing the button to submit the form. I get an "object expected" error when I trigger the "verifyit" function with ie if it helps. I appreciate any input, thanks in advance for any help. |
|||||||