JavaScript - Trying To Loop (repeat) This Javascript Counter
I am using the counter script below to display a count from 1-36. Does anyone know how to edit the javascript to flash or blink the number 36 a few times, and then loop the script to start over and count from 1-36 again (and again)?
Here's the script: <html> <head> <title></title> </head> <script type="text/javascript"> var t, max, i; function Increase(amount) { max = amount; i = parseInt(document.getElementById("count").value); t = setInterval("SetIncrease()", 500); } function SetIncrease() { document.getElementById("count").value = ++i; if(i == max) { clearTimeout(t); } } </script> <body onLoad="Increase(36);"> <input id="count" type="text" value="1" style="width:40px;font-family:georgia;font-size:30px;font-weight:bold;color:#CC0000;border: 0px solid #000000;text-align:right;background-color:#FFFF00;" align="center"> </body> </html> Many thanks! Similar TutorialsHi All, could you please help me. A have a little program and i need to count somehow how many times a while loop is ran. how could i do that? Thanks for your help I'd like to request this thread be moved to the PHP area. Thank you! Hello, I confess, I'm a javascript newbie, but I have a project dilemma that is beyond my capabilities. I'm building a web based scoring system. I will input players names and their individual scores. Each of their 12 "station" scores will be placed into 12 text boxes and the total will be added up and placed into a textbox called Score. I've started with only two textboxes to start out and here is what I have (which works). Code: <HTML> <HEAD> <script type="text/javascript"> function popup(form) { var Box1 = document.scoreform.one.value; var Box2 = document.scoreform.two.value; form.Score.value =(Number(Box1) + Number(Box2)); } </script> </HEAD> <BODY> <table width="980" border="0" cellspacing="0" cellpadding="0"> <tr> <td><FORM ACTION="#" NAME="scoreform" id="scoreform"> Station 1 <INPUT NAME="one" TYPE=TEXT id="one" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['one']; ?>" > Station 2 <INPUT NAME="two" TYPE=TEXT id="two" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['two']; ?>"> Score <input type=TEXT name="Score" readonly id="Score"> <BR> </FORM></td> </tr> </table> </BODY> </HTML> My dilemma is when I place a php repeat region (thanks dreamweaver) around this table, nothing works. I think the form needs to have a unique identity but I don't know how to execute it properly. Here's the code that doesn't work. Code: <?php if (!function_exists("GetSQLValueString")) { function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") { if (PHP_VERSION < 6) { $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; } $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue); switch ($theType) { case "text": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "long": case "int": $theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double": $theValue = ($theValue != "") ? doubleval($theValue) : "NULL"; break; case "date": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "defined": $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break; } return $theValue; } } mysql_select_db($database_mooren, $mooren); $query_Recordset1 = "SELECT * FROM SIGNUP_NSCA"; $Recordset1 = mysql_query($query_Recordset1, $mooren) or die(mysql_error()); $row_Recordset1 = mysql_fetch_assoc($Recordset1); $totalRows_Recordset1 = mysql_num_rows($Recordset1); ?> <HTML> <HEAD> <script type="text/javascript"> function popup(form) { var Box1 = document.scoreform.one.value; var Box2 = document.scoreform.two.value; form.Score.value =(Number(Box1) + Number(Box2)); } </script> </HEAD> <BODY> <?php do { ?> <table width="980" border="0" cellspacing="0" cellpadding="0"> <tr> <td><FORM ACTION="#" NAME="scoreform" id="scoreform"> Station 1 <INPUT NAME="one" TYPE=TEXT id="one" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['one']; ?>" > Station 2 <INPUT NAME="two" TYPE=TEXT id="two" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['two']; ?>"> Score <input type=TEXT name="Score" readonly id="Score"> <BR> </FORM></td> </tr> </table> <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?> </BODY> </HTML> <?php mysql_free_result($Recordset1); ?> Thank you for any assistance! Hey Everyone, I'm working on a counter. I have two images - each with their own click count. Right now each time the page loads the counter goes back to zero. I would assume I need some kind of server side coding. Any recommendations? Here's what I have so far. <html> <head> <script type="text/javascript"> var counter = 0; function increaseloveit() { counter += 1; document.getElementById('loveit').value = counter; } var counter = 0; function increasehateit() { counter += 1; document.getElementById('hateit').value = counter; } </script> </head> <body> <form> <a href="#" onclick="javascript:increaseloveit();"><input type="button" value="Love It!" name="loveit" onclick="" /></a><input id="loveit" value="0" size="2" /></form> <form> <a href="#" onclick="javascript:increasehateit();"><input type="button" value="Hate It!" name="hateit" onclick="" /></a><input id="hateit" value="0" size="2" /></form> </body> </html> I have the following code but it is not even showing up in the browser. I am very new to JS and very willing to learn. The code was originally found on this site and I have tweaked it and now it doesn't work...Any assistance would be much appreciated. <script type = "text/javascript"> var seconds; var clockId; function startClock(seconds){ timeInSeconds = parseInt(seconds); clockId = setInterval("tick()",1000); } function runClock() { var seconds = timeInSeconds; if (seconds > 60) { // stop at "" seconds alert ("Your time is up!"); clearInterval(clockId); // stop counting return false; } else { timeInSecs++; } var hours= Math.floor(seconds/3600); seconds %= 3600; var mins = Math.floor(seconds/60); secs %= 60; var result = ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secondss < 10) ? "0" : "" ) + seconds; document.getElementById("countdown").innerHTML = result; } startClock(0); // start count at 0 seconds </script> <span id="countdown" style="font-weight: bold;"></span> Hey Everyone, I'm trying to set up two different buttons that count their own individual clicks. So far I have everything except where one button leaves off, the other picks up. So if I click the left one three times it shows the number 3, and then if I click the button next to it, that button picks up at 4. I want each button to have its own count. Any ideas? Here's what I have so far. <html> <head> <script type="text/javascript"> var counter = 0; function increaseloveit() { counter += 1; document.getElementById('loveit').value = counter; } var counter = 0; function increasehateit() { counter += 1; document.getElementById('hateit').value = counter; } </script> </head> <body> <form> <a href="#" onclick="javascript:increaseloveit();"><input type="button" value="Love It!" name="loveit" onclick="" /></a><input id="loveit" value="0" size="2" /></form> <form> <a href="#" onclick="javascript:increasehateit();"><input type="button" value="Hate It!" name="hateit" onclick="" /></a><input id="hateit" value="0" size="2" /></form> </body> </html> Hi, I am trying to build a counter in javascript. The time on the counter should be displayed in hours, minutes and seconds<24:00:00>. When the counter reaches 00:00:00, it should stop.I read some books and they say that I must use the setInterval function to implement the timer. The problem is I don't know how to begin it. Could anybody give me some guidance on where to begin to do something like this. My javascript skills are basic as you can probably tell but I do like to learn it step by step. Thanks in advance hello, I have a textbox in my .net page, and totally new to java script. How do i get a script that will count the data being written in the text box to show increments of 100 and write the value to the bottom of the textbox. e.g. When u get to 100, at the bottom it says "1st hundred" ... and to 200 it writes "2nd hundred" UP to 500 ??? Please help thanks Hello, I actually use a counter on a webpage (It works) To do it, I use an inline javascript but I would like to unify the entire page and call that counter directly in the external Javascript that manages the whole site. Here's the actual code... Code: HTML <body onLoad=gen_hits()> ... <span id='hits'></span><SCRIPT language="JavaScript" SRC="http://www.mycompany.com/cgi-bin/counterdir/gcount.pl?NUMBER=../../otherdir/counter"></SCRIPT> ... </body> EXTERNAL JAVASCRIPT (ini.js) var hits="HITS "; function gen_hits() { document.getElementById("hits").innerHTML=hits; } and here a "view" of my request... Code: HTML <body onLoad=gen_hits()> ... <span id='hits'></span> ... </body> EXTERNAL JAVASCRIPT var hits="HITS " + <SCRIPT language="JavaScript" SRC="http://www.mycompany.com/cgi-bin/counterdir/gcount.pl?NUMBER=../../otherdir/counter"> </SCRIPT> ; function gen_hits() { document.getElementById("hits").innerHTML=hits; } Any idea how to modify it ? Thank you very much Gino 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> Hi Chaps, I have a PHP loop script that returns Job Information for each Project. What I've got so far is an Export to Excel (2007) function that displays the Project information on 1st tab, and the Job information on the 2nd. The problem I've got is that the Export to Excel function, gathers the information from the HTML table ID, but when looping through the data (resulting in more than 1 Job for a Project), the only way I can differentiate is to use some PHP code, something like: Quote: id="tbl_job_<?php echo $job_id; ?>" What I basically want is to store the information for each Job on a different Excel tab. But whart I have seems to break the javascript: Code: <script language="javascript" type="text/javascript"> function ExportToExcel() { var xlApp = new ActiveXObject("Excel.Application"); // Silent-mode: xlApp.Visible = true; xlApp.DisplayAlerts = false; var xlBook = xlApp.Workbooks.Add(); xlBook.worksheets("Sheet1").activate; var XlSheet = xlBook.activeSheet; XlSheet.Name="Project"; // Store the sheet header names in an array var rows = tbl_project.getElementsByTagName("tr"); var columns = tbl_project.getElementsByTagName("th"); var data = tbl_project.getElementsByTagName("td"); // Set Excel Column Headers and formatting from array for(i=0;i<columns.length;i++){ XlSheet.cells(3,i+1).value= columns[i].innerText; //XlSheetHeader[i]; } //run over the dynamic result table and pull out the values and insert into corresponding Excel cells var d = 0; for (r=4;r<rows.length+3;r++) { // start at row 2 as we've added in headers - so also add in another row! for (c=1;c<columns.length+1;c++) { XlSheet.cells(r,c).value = data[d].innerText; d = d + 1; } } //autofit the columns XlSheet.columns.autofit; xlBook.worksheets("Sheet2").activate; var XlSheet2 = xlBook.activeSheet; XlSheet2.Name="Job"; // Store the sheet header names in an array var rows = tbl_job.getElementsByTagName("tr"); var columns = tbl_job.getElementsByTagName("th"); var data = tbl_job.getElementsByTagName("td"); // Set Excel Column Headers and formatting from array for(i=0;i<columns.length;i++){ XlSheet2.cells(3,i+1).value= columns[i].innerText; //XlSheetHeader[i]; } //run over the dynamic result table and pull out the values and insert into corresponding Excel cells var d = 0; for (r=4;r<rows.length+3;r++) { // start at row 2 as we've added in headers - so also add in another row! for (c=1;c<columns.length+1;c++) { XlSheet2.cells(r,c).value = data[d].innerText; d = d + 1; } } //autofit the columns XlSheet2.columns.autofit; // Make visible: xlApp.visible = true; xlApp.DisplayAlerts = true; CollectGarbage(); //xlApp.Quit(); } </script> This is the bit I think I need to change to get the JS to work, but I'm a bit out of my depth! Quote: xlBook.worksheets("Sheet2").activate; var XlSheet2 = xlBook.activeSheet; XlSheet2.Name="Job"; // Store the sheet header names in an array var rows = tbl_job.getElementsByTagName("tr"); var columns = tbl_job.getElementsByTagName("th"); var data = tbl_job.getElementsByTagName("td"); Any helpor guidence would be awesome! Hey all, I need help creating a Javascript loop which posts a single static comment to all videos on a website(unless another language would prove to be a better alternative?) I'm not sure where to start and although I have an idea, my lack of programming skills have left me to turn to forums...any help would be greatly appreciated. *not asking for coding necessarily. Links to relative information pertaining to such a program/"loop", and any comments helping me understand what I'm trying to do would be great...I'm just not sure what to search for lol. Im still learning, just need helping starting a project. Thanks. I want to submit form using javascript but as I see javascript doesn't work in php loop. I use this code: Code: <form name="theForm"> <input type=text name="formInput"> <a href="javascript:document.theForm.submit();">Submit</a> </form> and it works fine in ordinary page, but stops working in php loop! I need to use link, not button to submit form. Can anyone please help? Thanks in advance I have done a basic while loop code but I can not figure out how to make the output print in 4 lines containing 5 numbers each. Can anyone tell me how to specify the number of output that appears on each line? Code: <?xml version="1.0" encoding="UTF-8"?> <!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> <title>example</title> </head> <body> <script type="text/javascript"> <!-- var x = 1; var linebreak="<br/>" while (x <= 20) { document.writeln("" + x + " " + ""); x = x + 1; } // --> </script> </body> </html> What I am trying to do is when a user click on an image button, 10 new windows will oppen. So, I created a For Loop function for that. Here is my code below: function clickk () { for (i=0; i<=10, i++) { window.open('annoying1.html','Annoying LOL','width=900, height=900') ;} } However, the window does open but not 10 times. Can you help me? Thank you... Hi guys I have what i think is a fairly simple script used for an image gallery with a next and back button. It seems to work pretty well, but i would like to make the gallery scroll round... ie when the user reaches the last picture and presses the next button again, the first image will be displayed again - and visa versa with the first image and the back button. Below is my JS, can post the small amount of HTML that calls it if necessary. Any help MUCH appreciated, been messing around with it for ages and being the newbie i am, can't seem to find any way of doing it Code: // List image names without extension var myImg= new Array(6) myImg[0]= "performance2011"; myImg[1]= "performance2005"; myImg[2]= "performance2006"; myImg[3]= "performance2007"; myImg[4]= "performance2008"; myImg[5]= "performance2009"; myImg[6]= "performance2010"; // Tell browser where to find the image myImgSrc = "../images/"; // Tell browser the type of file myImgEnd = ".jpg" var i = 0; // Create function to load image function loadImg(){ document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd; } // Create link function to switch image backward function prev(){ if(i<1){ var l = i } else { var l = i-=1; } document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd; } // Create link function to switch image forward function next(){ if(i>5){ var l = i } else { var l = i+=1; } document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd; } // Load function after page loads window.onload=loadImg; i, Am developing a webform using PL/SQL. Am using javascript to do some form validation Sample if(a =="") { alert("Please enter the first name"); return false; } else if(b =="") { alert("Please enter the last name"); return false; } else if (y !="Test1") { if (y != "Test2") { if (y != "Test3") { alert("Enter the right text"); return false; } } alert("am wrong outside"); } else if(z =="") { alert("Please fill al the fields"); return false; } it passes till alter("am wrong outside") and executes the procedure but doesnt goes to the last else part. I want it to go the last else part too. Please help. i know there are pre-made scripts to do what i'm doing. i want to create this myself to learn. i'm trying to create a list of section titles with arrows next to them, clicking on an arrow expands the section to read it's text, clicking on the arrow again collapses the section text. additionally, i would like an "expand all" and "collapse all" link and that's where my issue baffles me. my js - Code: function expandAll() { var collapsedDivs = document.getElementsByClassName('collapsed'); for (var i=0; i<collapsedDivs.length; i++) { var expandMe = collapsedDivs[i]; expandMe.style.display = 'block'; expandMe.addClassName('expanded'); expandMe.removeClassName('collapsed'); document.getElementById('arrow_'+i).innerHTML = '<img src="../media/hide.gif" />'; } } my html - Code: <div style="float:left" id="arrow_0"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION ONE TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section one text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_1"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION TWO TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section two text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_2"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION THREE TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section three text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_3"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION FOUR TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section four text text text text text text text text text text text text text text text text text text text text text text </div> upon executing the function, the result is the text for sections one and three being expanded and the arrows for one and two being changed. why? what am i doing wrong? I have the following code...the getelementbyId works fine it changes the value in the textfield aswell....but only in the first retrieved record...It is not working in any of the other records that are showed. Code is he <?php include("../connection/conn.php"); ?> <script type="text/javascript"> function notEmpty(){ var myTextField = document.getElementById('myText'); document.getElementById('myText').innerHTML = myTextField; if(myTextField.value != "") alert("You entered: " + myTextField.value) else alert("Would you please enter some text?") } </script> </head> <body> <?php $sql=mysql_query("select * from menuscript"); while($row=mysql_fetch_array($sql)) { ?> <div class="mine"> <?php echo $row['author'];?> <form> <input type='text' id='myText' /> <input type='button' onclick="notEmpty();" value='Form Checker' /> </form> </div> <?php }?> |