If/else Help

@xxaimsxxNov 09.2007

Hi Guys-

I really need help on this and I just don’t get it.

I have 3 countdown clock that is to be displayed 1 at a time (1 after another once it reaches 0)

It works fine in FF but in IE it rotates through everything so the page looks like it’s refreshing all the time.

My are my 3 functions and my date variables listed below:

I’m trying to figure out how to do an if else statement (or another way) so that it displays formatresults, then formatresults2 when formatresults is == 0, then formatresults3 when formatresults2 ==0.

Please someone help me. I’ve been on this since monday and I’m really not understanding how to write this out.

// 2007 HGS is here! Countdown of hours remaining for 2007 HGS var currentyear=new Date().getFullYear() var shoppingDate=(new Date().getMonth()>=11 && new Date().getDate()>=24)? currentyear : currentyear var shopping=new cdtime(“countdowncontainer2”, “November 8, “+shoppingDate+” 16:00:00″) shopping.displaycountdown(“days”, formatresults2)

// Countdown until 2007 HGS var currentyear=new Date().getFullYear() var hgs2007=(new Date().getMonth()==11 && new Date().getDate()<=23)? currentyear : currentyear var hgs07=new cdtime(“countdowncontainer1”, “November 8, “+hgs2007+” 15:30:00″) hgs07.displaycountdown(“days”, formatresults) </script>

to post a comment

JavaScript

5 Comments(s) _↴

@JMRKERNov 09.2007 — #Why not have one count down timer with a sentinel flag set to the proper table display?

The concept (not code), for example, could look like this:

oflag = 0; tflag = 0; // local/global variables depending upon set-up

settimeinterval = xxx (second/minutes/hours/days ???) to call settime_stuff() function

if (oflag != tflag) {

if (tflag == 1) { } // display time#1 info

if (tflag == 2) { } // display time#2 info

if (tflag == 3) { } // display time#3 info

oflag = tflag;

}

The function settime_stuff() would look like this:

function settime_stuff() {

tflag++ // when time interval has run out for each time segment

}

Looks like you have most of the code to do this already scripted. ?

Post back if you have questions.

@xxaimsxxauthorNov 09.2007 — #that's the problem. i just started learning js and everything is still like new to me. i can do really simple things. i can read the script and understand it but as far as trying to write it out from scratch i just dont' get it. =( gRR..lol: eek:

@xxaimsxxauthorNov 09.2007 — #Okies-

I changed the 3 functions to this 1 function:

function countdownClock() {

if (shopping==true) {

var displaystring="Shopping Hrs Remaining<br><table width=300 height=75 background=/images/promotions/countdownShoppingHoursRemaining.gif><tr><td align=center><table width=150 border=0 cellpadding=0 cellspacing=0 class='lcdstyle'><tr><td style='padding-top:26px;'>"+arguments[0]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[1]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[2]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[3]+"</td></tr><tr><td class='lcdstyleSmall'>DAYS</td><td class='lcdstyleSmall'>HRS</td><td class='lcdstyleSmall'>MINS</td><td class='lcdstyleSmall'>SEC</td></tr></table></td></tr></table>"

}

else if (hgs08==true) {

var displaystring="2008 HGS<br><table width=300 height=75 background=/images/promotions/countdownBG2.gif><tr><td align=center><table width=150 border=0 cellpadding=0 cellspacing=0 class='lcdstyle'><tr><td style='padding-top:26px;'>"+arguments[0]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[1]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[2]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[3]+"</td></tr><tr><td class='lcdstyleSmall'>DAYS</td><td class='lcdstyleSmall'>HRS</td><td class='lcdstyleSmall'>MINS</td><td class='lcdstyleSmall'>SEC</td></tr></table></td></tr></table>"

}

else if (this.timesup==false) {

var displaystring="2007 HGS<br><table width=300 height=75 background=/images/promotions/countdownBG2.gif><tr><td align=center><table width=150 border=0 cellpadding=0 cellspacing=0 class='lcdstyle'><tr><td style='padding-top:26px;'>"+arguments[0]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[1]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[2]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[3]+"</td></tr><tr><td class='lcdstyleSmall'>DAYS</td><td class='lcdstyleSmall'>HRS</td><td class='lcdstyleSmall'>MINS</td><td class='lcdstyleSmall'>SEC</td></tr></table></td></tr></table>"

}

return displaystring

}

However, i can't get the 2 if and if/else to work. it says undefined.

Below is the full script that i have:



<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/

color:#ffffff;

font: bold 18px Arial;

text-align:center;

}

.lcdstyleSmall{ /*Example CSS to create LCD countdown look*/

color:#ffffff;

font: bold 11px Arial;

text-align:center;

}



.small_grey{

color:#999999;

font:Arial, Helvetica, sans-serif;

font-size:11px;

text-align:center;

padding: 20px;

}

</style>

<script type="text/javascript">

/***********************************************

* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for this script and 100s more.

***********************************************/

function cdtime(container, targetdate){

if (!document.getElementById || !document.getElementById(container)) return

this.container=document.getElementById(container)

this.currentTime=new Date()

this.targetdate=new Date(targetdate)

this.timesup=false

this.updateTime()

}

cdtime.prototype.updateTime=function(){

var thisobj=this

this.currentTime.setSeconds(this.currentTime.getSeconds()+1)

setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second

}

cdtime.prototype.displaycountdown=function(baseunit, functionref){

this.baseunit=baseunit

this.countdownClock=functionref

this.showresults()

}

cdtime.prototype.showresults=function(){

var thisobj=this

var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds

if (timediff<0){ //if time is up

this.timesup=true

this.container.innerHTML=this.countdownClock()

return

}

var oneMinute=60 //minute unit in seconds

var oneHour=60*60 //hour unit in seconds

var oneDay=60*60*24 //day unit in seconds

var dayfield=Math.floor(timediff/oneDay)

var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)

var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)

var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))

if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level

hourfield=dayfield*24+hourfield

dayfield="n/a"

}

else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level

minutefield=dayfield*24*60+hourfield*60+minutefield

dayfield=hourfield="n/a"

}

else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level

var secondfield=timediff

dayfield=hourfield=minutefield="n/a"

}

this.container.innerHTML=this.countdownClock(dayfield, hourfield, minutefield, secondfield)

setTimeout(function(){thisobj.showresults()}, 1000) //update results every second

}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()

//Use arguments[0] to access "Days" left

//Use arguments[1] to access "Hours" left

//Use arguments[2] to access "Minutes" left

//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()

//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"

//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc

function countdownClock() {

if (shopping==true) {

var displaystring="Shopping Hrs Remaining<br><table width=300 height=75 background=/images/promotions/countdownShoppingHoursRemaining.gif><tr><td align=center><table width=150 border=0 cellpadding=0 cellspacing=0 class='lcdstyle'><tr><td style='padding-top:26px;'>"+arguments[0]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[1]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[2]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[3]+"</td></tr><tr><td class='lcdstyleSmall'>DAYS</td><td class='lcdstyleSmall'>HRS</td><td class='lcdstyleSmall'>MINS</td><td class='lcdstyleSmall'>SEC</td></tr></table></td></tr></table>"

}

else if (hgs08==true) {

var displaystring="2008 HGS<br><table width=300 height=75 background=/images/promotions/countdownBG2.gif><tr><td align=center><table width=150 border=0 cellpadding=0 cellspacing=0 class='lcdstyle'><tr><td style='padding-top:26px;'>"+arguments[0]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[1]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[2]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[3]+"</td></tr><tr><td class='lcdstyleSmall'>DAYS</td><td class='lcdstyleSmall'>HRS</td><td class='lcdstyleSmall'>MINS</td><td class='lcdstyleSmall'>SEC</td></tr></table></td></tr></table>"

}

else if (this.timesup==false) {

var displaystring="2007 HGS<br><table width=300 height=75 background=/images/promotions/countdownBG2.gif><tr><td align=center><table width=150 border=0 cellpadding=0 cellspacing=0 class='lcdstyle'><tr><td style='padding-top:26px;'>"+arguments[0]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[1]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[2]+"</td><td rowspan=2 valign=top style='padding-top:23px;'>:</td><td style='padding-top:26px;'>"+arguments[3]+"</td></tr><tr><td class='lcdstyleSmall'>DAYS</td><td class='lcdstyleSmall'>HRS</td><td class='lcdstyleSmall'>MINS</td><td class='lcdstyleSmall'>SEC</td></tr></table></td></tr></table>"

}

return displaystring

}

</script>



</head>

<body>

<center>

<div id="countdowncontainer1"></div>

<script type="text/javascript">

// Reset counter to countdown until 2008 HGS

var currentyear=new Date().getFullYear()

var hgs2008=(new Date().getMonth()>=12 && new Date().getDate()>=3)? currentyear+1 : currentyear

var hgs08=new cdtime("countdowncontainer1", "November 9, "+hgs2008+" 13:33:00")

hgs08.displaycountdown("days", countdownClock)

 // 2007 HGS is here! Countdown of hours remaining for 2007 HGS
   var currentyear=new Date().getFullYear()
   var shoppingDate=(new Date().getMonth()>=11 && new Date().getDate()>=24)? currentyear : currentyear
   var shopping=new cdtime("countdowncontainer1", "November 9, "+shoppingDate+" 13:32:00")
   shopping.displaycountdown("days", countdownClock)
 
   // Countdown until 2007 HGS
   var currentyear=new Date().getFullYear()
   var hgs2007=(new Date().getMonth()==11 && new Date().getDate()<=23)? currentyear : currentyear
   var hgs07=new cdtime("countdowncontainer1", "November 9, "+hgs2007+" 13:31:00")
   hgs07.displaycountdown("days", countdownClock)
 
 
  </script>

</center>

</body>

?

@JMRKERNov 10.2007 — #There are too many errors in your script for me to analyze.

This is more what I had in mind in my previous post #2.

See if you can see how it works and try to modify it to your needs.

[code=php]
 <html>
 <head>
 <title>Countdown Display</title>
 <style type="text/css">
 #tbl1 {
 display:none;
 background:#ffff00;
 height:50px;
 width:300px;
 }
 #tbl2 {
 display:none;
 background:#99ff00;
 height:50px;
 width:400px;
 }
 #tbl3 {
 display:none;
 background:#66ffff;
 height:50px;
 width:500px;
 }
 </style>
 
 <script type="text/javascript">
 var oflag = 0; 
 var tflag = 0;
 
 function ControlTableDisplay() {
 if (oflag == tflag) {
 tflag++;
 oflag = tflag;
 if (tflag == 1) { // display time#1 info
 document.getElementById('tbl1').style.display = 'block';
 }
 if (tflag == 2) { // display time#2 info
 document.getElementById('tbl1').style.display = 'none';
 document.getElementById('tbl2').style.display = 'block';
 }
 if (tflag == 3) { // display time#3 info
 document.getElementById('tbl2').style.display = 'none';
 document.getElementById('tbl3').style.display = 'block';
 }
 }
 }
 
 // Description: Countdown timer (seconds) from 'Start' to "MaxSecs"
 // 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: Future = new Date(year,month-1,day,hour,min,sec)
 // example: Future = new Date(2007,10,26,16,15,00) = Nov. 26, 2007 - 4:15:00 pm
 
 var MaxSecs = 5;
 var ND = new Date();
 var Future = new Date(ND.getFullYear(),ND.getMonth(),ND.getDate(),ND.getHours(),
 (ND.getMinutes()+1),ND.getSeconds());
 // Future = new Date(2007,10,4,19,58,0);
 
 function SetCount(){
 ND = new Date();
 Future = new Date(ND.getFullYear(),ND.getMonth(),ND.getDate(),ND.getHours(),
 (ND.getMinutes()),(ND.getSeconds()+MaxSecs));
 setTimeout("GetCount()", 100);
 }
 
 function GetCount() {
 Now = new Date();					//grab current date
 amount = Future.getTime() - Now.getTime();		//calc milliseconds between dates
 delete Now;
 
  if(amount < 0){						// time is already past
   if (tflag < 3) { 
   ControlTableDisplay(); 
   SetCount();
   } else { document.getElementById('timeLeft').innerHTML = 'Done'; }
 
  }
  else{							// date is still good
   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 +" day"+((days!=1)?"s":"")+", ";}
   if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
   if(days != 0 || hours != 0 || mins != 0){
   out += mins +" minute"+((mins!=1)?"s":"")+", ";}
   out += (secs+1);
   document.getElementById('timeLeft').innerHTML = out+' sec';
 
   setTimeout("GetCount()", 1000);
  }
 }
 </script>
 </head>
 <body onLoad="SetCount()">
 <!-- button onClick="ControlTableDisplay()">Pseudo-clock</button -->
 <br />Timed information to follow in: <div id="timeLeft" style="display:inline"></div>
 <p />
 <center>
 <div id='tbl1'>
 <table border="1"><tr><td>Table #1 information goes here.</td></tr></table>
 </div>
 
 <div id='tbl2'>
 <table border="1"><tr><td>Table #2 information goes here.</td></tr></table>
 </div>
 
 <div id='tbl3'>
 <table border="1"><tr><td>Table #3 information goes here.</td></tr></table>
 </div>
 </center>
 </body>
 </html>
 [/code]

Post back if you have questions. Good Luck! ?

Also in #JavaScript _↴

How do I have a page automatically refesh ONLY ONCE!Put inline JavaScript in the head [RESOLVED] RegExp is not working right...

Success!

Help @xxaimsxx spread the word by sharing this article on Twitter...

Tweet This

If/else Help

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

If/else Help

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴