demuro1 Posted November 26, 2012 Share Posted November 26, 2012 hello again. I may have mentioned before that I am writing an online catalog for a class I am in. I am rewriting the page the set timer function isn't working. I don't know why. I copied and pasted from code that executes as expected. Can anyone offer any help. I am only testing the on click for the search button right now. I'd love any help you can offer. Thanks <html><!--Release InformationRelease Version 2.0.0Release Notes: -page completely rewritten to take advantage of php--><?php#initialize and declare variables#table attributes$border=1;$edgewidth='15%';$tablealignment='centop';$tealign='cenmid';#buttons and fields$previousButton='<==';$nextButton='==>';$searchButton='Awesome Search' ;$searchField='Search';#page numberunset($pageNumber);$pageNumber=0;$pageNumber = $_POST['pageNumber'];#------------------------------------if(!isset($pageNumber)) {$pageNumber = 0;}else{$pageNumber = $_POST['pageNumber'];}#functions?><head> <title>Awesome Shape Store</title> <style>/*sadly this is done without style*/ .centop { text-align:center; vertical-align:top; } .cenmid { text-align:center; vertical-align:middle; } .header { font-family:"courier" text-align:center; vertical-align:top; font-size:250%; font-weight:bold; } </style> <script type='text/javascript'>/*make some magic*//*-========================================-*//*-- Initialization and Display Functions --*//*-========================================-*/function onLoad(){ alert('page is loading');}function display_timer(){ clearTimeout(timer); timer=setTimeout("document.getElementById('div_display').innerHTML=''", time);}function alertDisplay(d) /*-this function always calls display_timer()-*/{ document.getElementById("div_display").innerHTML=display_field=d; time=2000; display_timer();}/*End Initialize and Display Functions*//*-====================-*//*-- Action Functions --*//*-====================-*/ function addToCart() { var message = 'item added to cart'; alertDisplay(message); } function search(button,form) { alertDisplay(button.id); } function pageNumber(button,form) { alert('changing the page'); }/*-===================================-*//*-- Button and Keystroke Submission --*//*-===================================-*/ function buttonClick(button,form) { if (button.id == 'searchButton') { search(button,form); } else if (button.id == 'previousPage' || button.id == 'nextPage') { pageNumber(button,form); } else if (button.id == 'addToCart') { addToCart(button,form); } else { alert('button click error'); alert(button.id); alert(form.name); } } function keystrokeSubmit(textbox,form,e) { e = e? e : window.event; var prskeyrtrn = e.keyCode? e.keyCode : e.which? e.which : e.charCode? e.charCode :null; if (prskeyrtrn == 13 && textbox.id == 'searchField') { search(); } else if (prskeyrtrn == 13 && textbox.id == 'pageNumber') { pageNumber('Current Page'); } else{} } </script></head> <body onLoad="onLoad()"><!--=====================--><!--==begin top of page==--><!--=====================--><form name="head form"> <table width="100%" class="<?php echo $tablealignment; ?>" border="<?php echo $border; ?>"> <tr class="<?php echo $tealign; ?>"><!--left side of head --> <td width="<?php echo $edgewidth; ?>"> <table height="90" border="<?php echo $border; ?>" class="<?php echo $tablealignment; ?>" width="100%"> <tr class="<?php echo $tealign; ?>"><td>Current Page:</td></tr> <tr class="<?php echo $tealign; ?>"><td><input type="text" id="pageNumber" name="pageNumber" value="<?php echo $pageNumber; ?>" onkeypress="keystrokeSubmit(this,form,event)"></td></tr> <tr class="<?php echo $tealign; ?>"><td><input style="cursor:pointer" type="button" id="previousPage" name="previousPage" value="<?php echo $previousButton; ?>" onclick="buttonClick(this,form);"></td></tr> </table> </td><!--center of head --> <td class="<?php echo $tealign; ?>" width="80%"> <table height="90" border="<?php echo $border; ?>" class="<?php echo $tablealignment; ?>" width="100%"> <tr class="header"><td height="10%">Awesome Shape Store Catalog</td></tr> <tr class="<?php echo $tealign; ?>"><td height="90%"><div id="div_display" class="centop"></div></td></tr> </table> </td><!--right side of head --> <td width="<?php echo $edgewidth; ?>"> <table height="90" border="<?php echo $border; ?>" class="<?php echo $tablealignment; ?>" width="100%"> <tr class="<?php echo $tealign; ?>"><td><input type="text" id="searchField" name="searchField" value="<?php echo $searchField; ?>" onkeypress="keystrokeSubmit(this,event,form)"></td></tr> <tr class="<?php echo $tealign; ?>"><td><input style="cursor:pointer" type="button" id="searchButton" name="searchButton" value="<?php echo $searchButton; ?>" onclick="buttonClick(this,form);"></td></tr> <tr class="<?php echo $tealign; ?>"><td><input style="cursor:pointer" type="button" id="previousPage" name="previousPage" value="<?php echo $nextButton; ?>" onclick="buttonClick(this,form);"></td></tr> </table> </td> </tr> </table></form><!--===================--><!--==end top of page==--><!--===================--><!--===== This is a seperator ========== This is a seperator =====--><!--==============================--><!--==begin main section of page==--><!--==============================--><div name="divbody' id="divbody"> <table> <tr> <td valign="top"><img src="images/catalogImages/circle_large_red.gif"></td> <td><table> <tr> <td valign="top"><b>Item ID:</b></td> <td>1</td> </tr> <tr> <td valign="top"><b>Shape:</b></td> <td>Circle</td> </tr> <tr> <td valign="top"><b>Size:</b></td> <td>Large</td> </tr> <tr> <td valign="top"><b>Color:</b></td> <td><font color="red">red</font></td> </tr> <tr> <td valign="top"><b>Price:</b></td> <td>$3.00</td> </tr> <tr> <td valign="top"><b>Description:</b></td> <td>This is an amazing large <font color="red"><b>red</b></font> Circle with a super cool black boarder</td> </tr> </table></td> </tr> <!--add to cart button--> <tr><td><input type="button" value="Add to Cart" id= "large red circle" onclick=buttonSubmit(this)></td></tr> </table></div><!--============================--><!--==end main section of page==--><!--============================--></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted November 26, 2012 Share Posted November 26, 2012 I can't see a settimer() function anywhere on your page. Link to comment Share on other sites More sharing options...
demuro1 Posted November 26, 2012 Author Share Posted November 26, 2012 (edited) it's in the second javascript function titled alertDisplay. please use the code I am attaching to this post <html><!--Release Information Release Version 2.0.0Release Notes: -page completely rewritten to take advantage of php--><?php#initialize and declare variables#table attributes$border=1;$edgewidth='15%';$tablealignment='centop';$tealign='cenmid';#buttons and fields$previousButton='<==';$nextButton='==>';$searchButton='Awesome Search' ;$searchField='Search'; #page numberunset($pageNumber);$pageNumber=0;$pageNumber = $_POST['pageNumber'];#------------------------------------if(!isset($pageNumber)) {$pageNumber = 0;}else{$pageNumber = $_POST['pageNumber'];}#functions ?> <head> <title>Awesome Shape Store</title> <style>/*sadly this is done without style*/ .centop { text-align:center; vertical-align:top; } .cenmid { text-align:center; vertical-align:middle; } .header { font-family:"courier" text-align:center; vertical-align:top; font-size:250%; font-weight:bold; } </style> <script type='text/javascript'>/*make some magic*/ /*-========================================-*//*-- Initialization and Display Functions --*//*-========================================-*/function onLoad(){ alert('page is loading');}function alertDisplay(d)/*-this function always calls display_timer()-*/ { var time= 2000; document.getElementById('div_display').innerHTML = d; clearTimeout(timer); var timer = setTimeout("document.getElementById('div_display').innerHTML=' '",time); }/*End Initialize and Display Functions*/ /*-====================-*//*-- Action Functions --*//*-====================-*/ function addToCart() { var message = 'item added to cart'; alertDisplay(message); } function search(button,form) { alertDisplay(button.id); } function pageNumber(button,form) { alert('changing the page'); } /*-===================================-*//*-- Button and Keystroke Submission --*//*-===================================-*/ function buttonClick(button,form) { if (button.id == 'searchButton') { search(button,form); } else if (button.id == 'previousPage' || button.id == 'nextPage') { pageNumber(button,form); } else if (button.id == 'addToCart') { addToCart(button,form); } else { alert('button click error'); alert(button.id); alert(form.name); } } function keystrokeSubmit(textbox,form,e) { e = e? e : window.event; var prskeyrtrn = e.keyCode? e.keyCode : e.which? e.which : e.charCode? e.charCode :null; if (prskeyrtrn == 13 && textbox.id == 'searchField') { search(); } else if (prskeyrtrn == 13 && textbox.id == 'pageNumber') { pageNumber('Current Page'); } else{} } </script></head> <body onLoad="onLoad()"><!--=====================--><!--==begin top of page==--><!--=====================--><form name="head form"> <table width="100%" class="<?php echo $tablealignment; ?>" border="<?php echo $border; ?>"> <tr class="<?php echo $tealign; ?>"><!--left side of head --> <td width="<?php echo $edgewidth; ?>"> <table height="90" border="<?php echo $border; ?>" class="<?php echo $tablealignment; ?>" width="100%"> <tr class="<?php echo $tealign; ?>"><td>Current Page:</td></tr> <tr class="<?php echo $tealign; ?>"><td><input type="text" id="pageNumber" name="pageNumber" value="<?php echo $pageNumber; ?>" onkeypress="keystrokeSubmit(this,form,event)"></td></tr> <tr class="<?php echo $tealign; ?>"><td><input style="cursor:pointer" type="button" id="previousPage" name="previousPage" value="<?php echo $previousButton; ?>" onclick="buttonClick(this,form);"></td></tr> </table> </td><!--center of head --> <td class="<?php echo $tealign; ?>" width="80%"> <table height="90" border="<?php echo $border; ?>" class="<?php echo $tablealignment; ?>" width="100%"> <tr class="header"><td height="10%">Awesome Shape Store Catalog</td></tr> <tr class="<?php echo $tealign; ?>"><td height="90%"><div id="div_display" class="centop"></div></td></tr> </table> </td><!--right side of head --> <td width="<?php echo $edgewidth; ?>"> <table height="90" border="<?php echo $border; ?>" class="<?php echo $tablealignment; ?>" width="100%"> <tr class="<?php echo $tealign; ?>"><td><input type="text" id="searchField" name="searchField" value="<?php echo $searchField; ?>" onkeypress="keystrokeSubmit(this,event,form)"></td></tr> <tr class="<?php echo $tealign; ?>"><td><input style="cursor:pointer" type="button" id="searchButton" name="searchButton" value="<?php echo $searchButton; ?>" onclick="buttonClick(this,form);"></td></tr> <tr class="<?php echo $tealign; ?>"><td><input style="cursor:pointer" type="button" id="previousPage" name="previousPage" value="<?php echo $nextButton; ?>" onclick="buttonClick(this,form);"></td></tr> </table> </td> </tr> </table></form><!--===================--><!--==end top of page==--><!--===================--><!--===== This is a seperator ========== This is a seperator =====--><!--==============================--><!--==begin main section of page==--><!--==============================--><div name="divbody' id="divbody"> <table> <tr> <td valign="top"><img src="images/catalogImages/circle_large_red.gif"></td> <td><table> <tr> <td valign="top"><b>Item ID:</b></td> <td>1</td> </tr> <tr> <td valign="top"><b>Shape:</b></td> <td>Circle</td> </tr> <tr> <td valign="top"><b>Size:</b></td> <td>Large</td> </tr> <tr> <td valign="top"><b>Color:</b></td> <td><font color="red">red</font></td> </tr> <tr> <td valign="top"><b>Price:</b></td> <td>$3.00</td> </tr> <tr> <td valign="top"><b>Description:</b></td> <td>This is an amazing large <font color="red"><b>red</b></font> Circle with a super cool black boarder</td> </tr> </table></td> </tr> <!--add to cart button--> <tr><td><input type="button" value="Add to Cart" id= "large red circle" onclick=buttonSubmit(this)></td></tr> </table></div><!--============================--><!--==end main section of page==--><!--============================--></body></html> Edited November 26, 2012 by demuro1 Link to comment Share on other sites More sharing options...
Ingolme Posted November 26, 2012 Share Posted November 26, 2012 You mean setTimeout(). The program is probably getting stuck at this line: clearTimeout(timer); "timer" is local to the function so it isn't set. The code will probably work if you remove that line. Link to comment Share on other sites More sharing options...
demuro1 Posted November 26, 2012 Author Share Posted November 26, 2012 if I save the code as .html it works fine. I am now saving it as.php and it hasn't worked right since. the expected behavior isclick button 1-message 1 display for 2 seconds click button one-message 1 is displayclick button 2 before 2 seconds elapses-message 2 is displayed for 2 seconds or until another button is pushed whichever comes first the problem is i can click 20 buttons but the timer never resets. Link to comment Share on other sites More sharing options...
Ingolme Posted November 26, 2012 Share Posted November 26, 2012 You need to make the timer variable global. To do that, just make sure that var timer; is written in the global scope. Link to comment Share on other sites More sharing options...
demuro1 Posted December 1, 2012 Author Share Posted December 1, 2012 Ingolme, I had to go with this ultimately to get it to work. I'm not sure on the specifics of all the pieces but I know this works. Thanks again for all your help! var timer = setTimer("",0); /* reset the timer for add to cart display or other messages */function alertDisplay(d){ var time=5000; document.getElementById("div_display").innerHTML=d; clearTimeout(timer); timer=setTimeout("document.getElementById('div_display').innerHTML=''", time);} Link to comment Share on other sites More sharing options...
Ingolme Posted December 1, 2012 Share Posted December 1, 2012 You only need this; var timer; // Make timer global setTimer() isn't a function. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now