more for loop help please

[jlodwick]

First let me give you a link to the page I need to add the loops to then I'll explain:

 

http://www.spaenvydeals.com/testing-timer-loop.html

 

I have a countdown timer that I've modified to make an "add to cart" button change to hidden after the timer reaches 0 using "getElementByID".  It works great but I would like to add a loop so this shows up for every product I add to the page.  Every product on the page should have the same timer and all of them should expire at the same time but obviously they all have different "add to cart" buttons that all need to go hidden when the timer expires.  I also have a fancy countdown timer that uses flash and all it does is says "Sorry Deal is Expired" with a pretty purple box around it when the timer reaches 0.  I have both because I can't figure out how to get the pretty one to make the "add to cart" button hidden because it uses XML instead of javascript for the actions for the timer.  Also I'm not sure if I would even trust it to remove the "add to cart" button if someone doesn't have flash on their PC.  I don't really mind having both because I just make the first timer white and it doesn't show up.  I'm more concerned with adding loops on these 2 countdown timers.  As you can see on the testing page above I copied the first product but the timers don't show up on the second copied product because I currently don't have any loops.  Please let me know if you have any questions.

 

Thanks,

Jeff

[Kays]

Could you make your post more straight-to-the-point? I have no idea what you are talking about in the second timer. As for the first one, it's fairly easy:

 

// JavaScript
function setTimer (button)
{
    // set the timer and make your change to just button
}

(function () {
    // loop to get all elements with class "addbutton" (assuming only those buttons have this class
    var buttons = getAddButtons();
    for (var i = 0; i < buttons.length; i++)
    {
        buttons[i].onclick = function () { setTimer(buttons[i]); };
    }
})();

[jlodwick]

Sorry for the confusion what I was trying to say is there is a second timer that uses flash and XML and is the purple pretty timer but it doesn't remove the "add to cart" so that's why I need the first timer.  I don't understand how to apply your script to my current script for my first timer.  Below are my scripts broken out:

 

 #timer
{
color: red;
font-size:11px;
font-style:italic;
}
<script type="text/javascript">

//######################################################################################
// Author: ricocheting.com
// Version: v2.0
// Date: 2011-03-31
// Description: displays the amount of time until the "dateFuture" entered below.

// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
// format: dateFuture1 = new Date(year,month-1,day,hour,min,sec)
// example: dateFuture1 = new Date(2012,4,24,23,59,59) = April 26, 2003 - 2:15:00 pm

dateFuture1 = new Date(2012,4,24,23,59,59);


// TESTING: comment out the line below to print out the "dateFuture" for testing purposes
//document.write(dateFuture +"<br />");


//###################################
//nothing beyond this point
//first product

function GetCount(ddate,iid){

dateNow = new Date();	//grab current date
amount = ddate.getTime() - dateNow.getTime();	//calc milliseconds between dates
delete dateNow;

// if time is already past
if(amount < 0) {
	document.getElementById(iid).innerHTML="Sorry this deal is expired";
    var input = document.getElementById('link1'); 
    var input2 = document.createElement('input');
    with (input2){
        type = 'hidden';
    }
    input.parentNode.replaceChild(input2,input);         
}
// else date is still good
else{
	days=0;hours=0;mins=0;secs=0;out="";

	amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

	days=Math.floor(amount/86400);//days
	amount=amount%86400;

	hours=Math.floor(amount/3600);//hours
	amount=amount%3600;

	mins=Math.floor(amount/60);//minutes
	amount=amount%60;

	secs=Math.floor(amount);//seconds

	if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
	if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
	out += mins +" "+((mins==1)?"min":"mins")+", ";
	out += secs +" "+((secs==1)?"sec":"secs")+", ";
	out = out.substr(0,out.length-2);
	document.getElementById(iid).innerHTML=out;

	setTimeout(function(){GetCount(ddate,iid)}, 1000);
}
}



window.onload=function(){
GetCount(dateFuture1, 'countbox1');


//you can add additional countdowns here (just make sure you create dateFuture2 and countbox2 etc for each)
}

</script>

//applying the countdown timer:

<div id='timer'>
<div id="countbox1"></div>

</div>

//id of "link1" below is referenced in the javascript and changes the type to hidden if amount variable (countdown timer) is less than 0.

<input class="add" id="link1" type="image" src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/buttons/defaults/Add_To_Cart.gif">

 

<script type="text/javascript" src="http://www.spaenvydeals.com/Deals/swfobject.js"></script>
<script type="text/javascript">

var flashvars = {
	config_file: "http://www.spaenvydeals.com/Deals/fd-denver-co-date-changer.xml?nocache=010920091407"
};

var params = {
	bgcolor: "FFFFFF",
	menu: "false",
	quality: "high",
	scale: "scale"
};

var attributes = {
	id: "swf_content",
	name: "swf_content"
};

swfobject.embedSWF("http://www.spaenvydeals.com/Deals/countdown_flip_1days.swf", "flashcontent", "388", "74", "8.0.0", false, flashvars, params, attributes);

</script>

//below is how I apply this timer

	<!--**********-->
	<div id="flashcontent">
		<div id="altcontent">
			<h3>Wrong version or	no version of Flash detected</h3>
			<p>You might also have <strong>JavaScript</strong> disabled. If so, please
				enable scripting in your browser's preferences or internet options or download
				the latest <a href="http://www.microsoft.com/windows/internet-explorer/download-ie.aspx">Internet Explorer</a> or <a href="http://www.mozilla.com/firefox/">Firefox</a> browser.</p>

			<p>If you'd like to download the latest <strong>Flash</strong> plug-in, <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">click
				here</a>.</p>
		</div>
	</div>
	<!--**********-->

 

[jlodwick]

I tried the loop below for the first timer which is what I thought would work but it didn't work.  It didn't even show the timer on the first product.  Any ideas?

 

<script type="text/javascript">

//######################################################################################
// Author: ricocheting.com
// Version: v2.0
// Date: 2011-03-31
// Description: displays the amount of time until the "dateFuture" entered below.

// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
// format: dateFuture1 = new Date(year,month-1,day,hour,min,sec)
// example: dateFuture1 = new Date(2012,4,24,23,59,59) = April 26, 2003 - 2:15:00 pm

dateFuture1 = new Date(2012,4,24,23,59,59);


// TESTING: comment out the line below to print out the "dateFuture" for testing purposes
//document.write(dateFuture +"<br />");


//###################################
//nothing beyond this point
//first product

function GetCount(ddate,iid){

dateNow = new Date();	//grab current date
amount = ddate.getTime() - dateNow.getTime();	//calc milliseconds between dates
delete dateNow;

// if time is already past
for(i=document.getElementById('link1'); i='link1'; i++){
    if(amount < 0)
    {
	document.getElementById(iid).innerHTML="Sorry this deal is expired";
    var input = document.getElementById('link1'); 
    var input2 = document.createElement('input');
    with (input2){
        type = 'hidden';
    }
    input.parentNode.replaceChild(input2,input);         
break;
}
}
// else date is still good
for(j='countbox1'; j='countbox1'; j++){

else(amount > 0)
    {
	days=0;hours=0;mins=0;secs=0;out="";

	amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

	days=Math.floor(amount/86400);//days
	amount=amount%86400;

	hours=Math.floor(amount/3600);//hours
	amount=amount%3600;

	mins=Math.floor(amount/60);//minutes
	amount=amount%60;

	secs=Math.floor(amount);//seconds

	if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
	if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
	out += mins +" "+((mins==1)?"min":"mins")+", ";
	out += secs +" "+((secs==1)?"sec":"secs")+", ";
	out = out.substr(0,out.length-2);
	document.getElementById(iid).innerHTML=out;

	setTimeout(function(){GetCount(ddate,iid)}, 1000);
break;
}
}
}


window.onload=function(){
GetCount(dateFuture1, 'countbox1');


//you can add additional countdowns here (just make sure you create dateFuture2 and countbox2 etc for each)
}

</script>

[jlodwick]

I think I can do the following for the first for loop if the timer is less than 0 but I'm not sure what to do for the second for loop if the timer is greater than 0.  for(i=input2; i='link1'; i++)