JavaScript - Continuous Array Loop
I'm new to Javascript and having some difficulty understanding why I cannot get this code to continuously loop the captions in the array on the screen.
The first caption in the array with appear, hold as per the setTimeout cycle and then disappear, but the next caption never comes up. 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> <script type="text/javascript"> <!-- var caption=new Array() caption[0]="Caption1" caption[1]="Caption2" caption[2]="Caption3" var x=0 //--> </script> </head> <html> <body> <script type="text/javascript"> <!-- function cycle(){ document.write(caption[x]) if(x<3) x++ else x=0 setTimeout("cycle()",1000) } cycle() //--> </script> </body> </html> I'm sure this is probably a simple fix, or at least I hope it is. So any assistance is appreciated. Thank you Similar TutorialsHi 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! ***Solved***
I am trying to run three continuous slideshows on the same page. The script I am currently using is written below. Can it be modified so I can run all three slides at once on the same page? <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar" var image3=new Image() image3.src="thirdcar.gif" //--> </script> </head> <body> <img src="firstcar.gif" name="slide" width="100" height="56" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Hi, I found the following code on a web site. It displays text as if it were being typed but it only does it once. I have been trying to use various functions to make the effect continuous, i.e. make the header appear as typing text, clear the text, again make the header appear as typing text, clear the text, and so on. I wish this to continue for as long as the web page is open. But I just can't get it to work. I wonder if anyone has any suggestions? I would be very grateful for all help. [code] <h2 id="fly">Header</h2> <script type="text/javascript"> //Use "$" for linebreak //By default, set to just grab the text from element with ID="fly" message = document.getElementById("fly").innerHTML; // $ = taking a new line distance = 50; // pixel(s) speed = 200; // milliseconds var txt="", num=0, num4=0, flyofle="", flyofwi="", flyofto="", fly=document.getElementById("fly"); function stfly() { for(i=0;i != message.length;i++) { if(message.charAt(i) != "$") txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>"; else txt += "<br>"; } fly.innerHTML = txt; txt = ""; flyofle = fly.offsetLeft; flyofwi = fly.offsetWidth; flyofto = fly.offsetTop; fly2b(); } function fly2b() { if(num4 != message.length) { if(message.charAt(num4) != "$") { var then = document.getElementById("n" + num4); then.style.left = flyofle - then.offsetLeft + flyofwi / 2; then.style.top = flyofto - then.offsetTop + distance; fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 5); } num4++; setTimeout("fly2b()", speed); } } function fly3(target,lef2,num2,top2,num3) { if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1)) { if(lef2 >= 0) lef2 -= num2; else lef2 += num2 * -1; if(Math.floor(lef2) != -1) { document.getElementById(target).style.visibility = "visible"; document.getElementById(target).style.left = Math.floor(lef2); } else { document.getElementById(target).style.visibility = "visible"; document.getElementById(target).style.left = Math.floor(lef2 + 1); } if(lef2 >= 0) top2 -= num3 else top2 += num3 * -1; if(Math.floor(top2) != -1) document.getElementById(target).style.top = Math.floor(top2); else document.getElementById(target).style.top = Math.floor(top2 + 1); setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50) } } stfly() </script> [code] HI, I am new to JavaScript and need help with a code //names of couples stored in array var contestantNamesArray = ['Tom and Nazia', 'Pat and Dan', 'Sandra and Kofi', 'Ian and Adele', 'Paul and Costas']; //points awarded by judges and audience stored in arrays var judgesPointsArray = [2,1,5,4,3]; var audiencePointsArray = [4,5,2,3,1]; //Part (i)(a) //new array to store the combined points for each couple var combinedPointsArray = new Array (4); //Part (i)(b) //loop to add the judges and the audience points for each couple and to store them in the combined points array for (var score = 0; score < combinedPointsArray.length; score = score + 1) { combinedPointsArray[score] = judgesPointsArray[score] + audiencePointsArray[score]; } //Part(i)(c) //loop to find and write out the maximum number of points scored maxPointsScoredIndex = 0; for (var score = 1; score < combinedPointsArray.length; score = score + 1) { if (combinedPointsArray[score] > combinedPointsArray[maxPointsScoredIndex]) { maxPointsScoredIndex = score; } } document.write ('The maximum number of points was ' + combinedPointsArray[maxPointsScoredIndex] + '<BR>'); //Part (iii) //Add code that will // -- write out a heading for the list of couples scoring the maximum // -- write out the names of all the couples with the maximum number of combined points // keeping score of how many they are // -- at the end, write out whether a dance-off is required or not, depending on how many couples scored the maximum It's the third part that I'm struggling with. Could someone help me? Thank you! 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 Hello, I have a homework assignment to complete and I don't understand 2 particular parts. I need to design a game that does the following: Based on assignment 3, write a program that allows you and the computer to take turns and guess each other's secret number (between 1 and 100); Requirements: * You and your opponent (computer) take turns to guess. * You and your opponent gives simple hints like in assignment 3 for each round. * Show how many rounds have passed. * Keep guessing record and display it to assist the game play. The guessing of the numbers needs to be simultaneous, and the professor wants us to use a while loop and an array. It is based on a previous assignment, in which we designed a program that would ask the user to guess a number between 1-100 that the computer generated. The user is prompted by alerts that say "too high" or "too low" and then is told when they guess correctly. This I understand, but I am confused about how to modify it to fit the new assignment. Here is the code I have: Code: <html> <head> <title> Homework #3 </title> <script type="text/javascript"> var randomNumber = Math.floor (Math.random()*100)+1; { var compNumber; var compNumber = Math.floor (Math.random()*100)+1; } { var copyArray, index; copyArray = [] index = 0; while (index < strArray.length) { copyArray[index] = parseFloat(strArray[index]); index = index + 1; } return copyArray; } function compGuess () { document.getElementById("compGuessBox").value=compNumber; } function Check() // Assumes: guessBox containes a guess // Results: displays text saying if guess is too high, too low, or correct { var userNumber; userNumber = document.getElementById("guessBox").value; userNumber = parseFloat(userNumber); if (userNumber < randomNumber) { alert("Too Low!"); } if (userNumber > randomNumber) { alert("Too High!"); } if (userNumber == randomNumber) { alert ("Correct!"); } } </script> </head> <body style="background-color:Lavender"> <h1> <div style="text-align:center"> Guess the Number the Computer has Chosen! </h1> <p> <div style="text-align:center"> <input type= "text" id="compGuessBox" size="10" value="" /> <input type="button" value="Click for Guess" onclick="compGuess();" /> </p> <p> <div style="text-align:center"> <input type="button" value="Too Low!" onClick="FUNCTION TO MAKE IT GUESS AGAIN HIGHER" <input type="button" value="Too High!" onClick="FUNCTION TO MAKE IT GUESS AGAIN LOWER" <input type="button" value="Correct!" </p> <p> <div style="text-align:center"> The Computer is Thinking of a Number Between 1-100. Enter your Guess: <input type="text" id="guessBox" size="10" value="" /> </p> <p> <input type="button" value="Check your Answer" onclick="Check();" /> </p> </body> </html> Obviously it doesn't work. My questions a 1.) How can I use an array to display the guesses? 2.) How can I use a while loop to allow the computer and user to take turns guessing each other's numbers? I'm sorry if these are too broad--I genuinely do not know how to proceed from here. I'm going to (hopefully) see the professor to ask these questions as well, but I thought I'd ask here just in case our schedules can't match up. Thank you in advance! 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 >< my assignment ----------------------------------- write a while loop that prompts user to enter name add their names to an array if they enter "exit" end the prompting sort array and list in sorted order ----------------------------------- this is what i got so far. sooo confused because i cant get the user input into an array. error console says i need ";" before the "var names[loopCounter] = prompt("enter","");" confused about this also var names = new Array(); var loopCounter; loopCounter = 0; while (names != "exit") { var names[loopCounter] = prompt("enter name",""); loopCounter++ } var i; names.sort(); for (i=0;i<names.length;i++) { document.write(names[i] + "<br>"); } I am having a hard time figuring this out, I have two simple arrays and I want to populate one by asking a visitor to enter information, it goes something like this... Code: var country = new Array(5); c_list[0] = "USA"; c_list[1] = "UK"; c_list[2] = "France"; c_list[3] = "Germany"; c_list[4] = "Spain"; var president = new Array(); // Last name only president[0] = window.prompt("President of USA?", ""); // Obama president[1] = window.prompt("Prime Minister of UK?", ""); // Brown president[2] = window.prompt("President of France?", ""); // Sarkozy president[3] = window.prompt("Prime Minister of Germany?", ""); // Merkel president[4] = window.prompt("President of Spain?", ""); // Zapatero Now the question is, how do I use a simple for loop to use the names entered and populate the second array? Any help would be very kindly appreciated. Thank you Hi, I know this is painfully obvious, but I can't get my head around it. Basically, these loops: Code: for (var p=0; p < routeInfo.length; p++) { times = routeInfo[p].getElementsByTagName("time"); dirs = routeInfo[p].getElementsByTagName("dirs"); dist = routeInfo[p].getElementsByTagName("dist"); for (q=0;q<dirs.length;q++) { count++; time = GXml.value(routeInfo[p].getElementsByTagName("time")[q]); dir = GXml.value(routeInfo[p].getElementsByTagName("dirs")[q]); dist = GXml.value(routeInfo[p].getElementsByTagName("dist")[q]); if (time.length>1) { way+='<div class="dir">'+count+'. '+dir+'</div>'+'<div class="results"><div class="time">'+time+'</div><div class="dist">'+dist+'</div><br><br>'; } else way+='<div class="dir">'+count+'. '+dir+'</div><br>'; } } outputs lines of text, with two <br> between them. What I want is for if it's the last loop for that only to be one <br> so I'm thinking something like this: Code: if (last loop) {end =<br>} else end=<br><br> ... way+='<div class="dir">'+count+'. '+dir+'</div>'+'<div class="results"><div class="time">'+time+'</div><div class="dist">'+dist+'</div>'+end; but I can't figure out what that "last loop" code should be. Any ideas? All I am trying to pull the data from an array and place it in a table. If I assign index 0 it works as desired. I then placed it inside a foor loop and changed the index to a variable and I get "undefined". Here is the code snipet: document.write("<table width='500'>"); document.write("<tr><td width='75%'>Product:</td><td width='25%' align='center'>Cost</td></tr>"); for (i=0; i<(itemPrice.length); i++); { document.write("<tr><td>" + itemName[i] + "</td><td align='right'>" + itemPrice[i] + "</td></tr>"); totalcost = totalcost + itemPrice[i]; } document.write("<tr><td>The total is:</td><td align='right'>" +"$ "+totalcost+ "</td></tr>"); document.write("</table>"); compared to some of the samples I have seen I apologize if this is too elementary. rneaul I'm just a beginner with JS and having trouble with the code for my array and FOR loop. I'd like the names of these animals to be listed on separate lines. Am I way off here? I wasn't sure if the for statement had to be within a function. I've spent hours trying to figure this out and appreciate any help. <script type="text/javascript"> var animal = new Array(4); animal[0] = "dog"; animal[1] = "cat"; animal[2] = "bird"; animal[3] = "rabbit"; var counter = 0; function writeAnimal () { for (var counter = 0; counter== 4; counter++) { document.write(animal[0]); document.write("<br />"); } } </script> Hi, I have this loop: Code: for (var j = 0; j < gmarkers.length; j++) { gmarkers[j].hide(); elabels[j].hide(); map.closeInfoWindow(); var str=gmarkers[j].myname.toLowerCase(); var patt1=inp; if (str.match(patt1)) { found = true; gmarkers[j].show(); count++; var p=j; } } which was useful for passing the p variable when it was just one number. but now I need to get that number every time j gets set (I understand that the j gets overwritten each time the loop goes through). What would be ideal is if p could become an array, the contents of which match the values that j has passed though during the loop cycle. I thought var p = new Array (j); minght do the trick, but obviously not... I hope that I'm explaining it OK, and that it's possible, and that somebody has an idea how to do it... ok so I am trying to create a function that creates an array comprised of filenames based on a given range. I.E if 2-8 is selected and a foldername of UMCP/ and a common name of college is also given, the function should return and array such as [UMCP/college2.jpg,UMCP/college3.jpg.....UMCP/college8.jpg]. Here is what I've got but the alert that should tell me the filename of the first image says it is undefined, how can i fix this? Code: function getArrayPhotosNames (total,count,first,last) { /*window.alert("get Array Photo Names");*/ var folderName = document.getElementById("photofold").value; var Alias = document.getElementById("commonName").value; for (var i=0; i>=total; i+=1) { var imageNum = i+first; var filename = folderName + Alias + imageNum + ".jpg"; window.alert("image will be stored as"+filename); photosArrayGlobal[i]= filename; } window.alert("the first photo is" +photosArrayGlobal[0]); var countnum = count.value; if (count === 0) { window.alert("randomize time") var randomArray = photosArrayGlobal.sort( randomize() ); var randomPhoto= document.getElementById("myImage"); randomPhoto.setAttribute("src", randomArray[photoIndexGlobal]); } else { var firstPhoto=document.getElementById("myImage"); firstPhoto.setAttribute("src", photosArrayGlobal[photoIndexGlobal]) } } I wrote js functions to reset a php form (multiple questions). The below works: Code: function resetForm(){ resetGroup(document.forms[0].answer1); resetGroup(document.forms[0].answer2); } Answer1 and answer2 are the elements of $_POST array. (<input name="answer1"> in php). In this example, I tried with only two questions, but I have up to 35 questions in one form. Instead of writing the above resetGroup() 35 times, I want to for-loop it. I tried Code: function resetForm(){ for (var i=1; i<3; i++){ resetGroup(document.forms[0]."answer"+i); } That didn't work. Could someone help me to make the loop work? Or would someone have better or simpler idea? Thanks. Hi Having a small problem with writing out the matches from an array using a For loop. I have two arrays, lets say arrayA and arrayB. In arrayB are numbers which are a number of miles, ie 1,2,6,4,5,6,6. And in arrayA are the days of the week. Each day of the week is associated with a mileage, ie Mon = 1, Tues = 2 etc. My script has found the largest mileage in arrayB. Next I have to find the days of the week that match this highest mileage and write these out, along the lines of "The highest mileage was 6 run on Wed, Sat, Sun." I have managed to get a For loop to work with this BUT..... I can only get it to write out the first instance of the day the match is found. ie "The highest mileage was 6 run on Wed," Pointers in the right direction to help me solve this problem would be much appreciated. [CODE] maximumDistanceIndex = 0; for (var distance = 1; distance < distanceArray.length; distance = distance + 1) { if (distanceArray[distance] > distanceArray[maximumDistanceIndex] ) { maximumDistanceIndex = distance document.write ('The maximum distance was ' + maximumDistance + ' km' + ' run on ' + dayArray[maximumDistanceIndex] ); } } [CODE] 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! Ok javascript gurus, could someone help me out with a simple script? I have an array that I want to loop through and display the values of the array on the page as it loops (so I guess there should be a slight delay before the next one appears over it). I want to loop though until a button is clicked. Help? |