[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 308
  • Last Modified:

User Input To Countdown Timer 500 points

hi

i have a countdown timer in javascript. the date is hardcoded into the function and im very happy with the way it works that way, but now i want the user to be able to select the date from a combobox(s) or textbox.

here is my function with required parameter:

setcountdown(2004,10,18,00,00,00)

as you can see the date is hardcoded into the function, but now i want it to work as i stated above --> user to be able to select dates from combobox(s) or textbox.

i tried solving this, but i have no success, so i need help on this.

any code, working examples, URL ideas etc are all welcome

thank you,

-sean-
0
ellandrd
Asked:
ellandrd
  • 4
  • 3
1 Solution
 
cLFlaVACommented:

Say you have select boxes:

<select name="the_year">
<option value="2005">2005</option>
<option value="2004" selected>2004</option>
<option value="2003">2003</option>
</select>

<select name="the_month">
<option value="0">January</option>
<option value="1" selected>February</option>
<option value="2">March</option>
</select>

<select name="the_date">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">4</option>
</select>

<input type="button" onclick="setcountdown();">


Then, in your setcountdown function, do this:

var y = parseInt(document.forms['the_form'].elements['the_year'].value);
var m = parseInt(document.forms['the_form'].elements['the_month'].value);
var d = parseInt(document.forms['the_form'].elements['the_date'].value);

And then go from there...
0
 
justinbilligCommented:
eh, you should leave the paramters the way it is in the countdown function but have a function that calls the countdown function

function CallCountDown( )
{
     var y = parseInt(document.forms['the_form'].elements['the_year'].value);
var m = parseInt(document.forms['the_form'].elements['the_month'].value);
var d = parseInt(document.forms['the_form'].elements['the_date'].value);

   etc...

setcountdown( y, m, d, h, m , s)
}



like so, no need to change existing code
   
0
 
cLFlaVACommented:
yes, it's ANOTHER way to do it.  No need to downgrade a perfectly acceptable solution.

Maybe we should write a function to call that calling function.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ellandrdAuthor Commented:
what if my form is on another page? will it still work??
0
 
cLFlaVACommented:
?

If you're including the JS function like this:

<javascript type="text/css" src="javascript.js"></script>

Then both of the above solutions would still work.
0
 
ellandrdAuthor Commented:
right i did what ye said, and i get a form on my page, i enter a date and click on the button, but nothing happens,

in the tool bar, the messgae is "done, but error on page"

any suggestions??

heres my code:
-----------------------
<html>
<head>
<script language="JavaScript1.2">
function setcountdown()
{
var yr = parseInt(document.forms['the_form'].elements['the_year'].value);
var mo = parseInt(document.forms['the_form'].elements['the_month'].value);
var da = parseInt(document.forms['the_form'].elements['the_date'].value);
hr=0;
min=0;
sec=0;
}

var occasion="deadline of updating this document"
var message_on_occasion="This Document was NOT updated on time!!"
var countdownwidth='590px'
var countdownheight='35px'
var countdownbgcolor='white'
var opentags='<font face="Trebuchet MS"><small>'
var closetags='</small></font>'
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''
function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
countdown()
}
if (document.all||document.getElementById)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')
window.onload=start_countdown
function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
//if on day of occasion
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+message_on_occasion+closetags
return
}
//if passed day of occasion
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+"Event already passed! "+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+"Event already passed! "+closetags
return
}
//else, if not yet
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left till "+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left to "+occasion+closetags
}
setTimeout("countdown()",1000)
}
</script>
</head>
<body>
<form name="the_form">
<select name="the_year">
<option value="2005">2005</option>
<option value="2004" selected>2004</option>
<option value="2003">2003</option>
</select>
<select name="the_month">
<option value="0">January</option>
<option value="1" selected>February</option>
<option value="2">March</option>
</select>
<select name="the_date">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">4</option>
</select>
<input type="button" value="Start Countdown" onclick="setcountdown();">
</form>
<ilayer id="countdownnsmain" width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id="countdownnssub" width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer>
</body>
</html>

p.s i also need the font to change to red when theres one day left on countdown...


cheers sean
0
 
cLFlaVACommented:
I'm slowly peeling away at this unneccessarily long code.

a) it is very solid design practice to indent your code.
b) declare your variables globally if you'll be referencing them from multiple functions.

Try this, let me know what's next:

<html>
<head>
<script language="JavaScript1.2">

var yr, mo, da, hr, min, sec;

function setcountdown()
{
      yr = parseInt(document.forms['the_form'].elements['the_year'].value);
      mo = parseInt(document.forms['the_form'].elements['the_month'].value);
      da = parseInt(document.forms['the_form'].elements['the_date'].value);
      hr=0;
      min=0;
      sec=0;
}

var occasion="deadline of updating this document"
var message_on_occasion="This Document was NOT updated on time!!"
var countdownwidth='590px'
var countdownheight='35px'
var countdownbgcolor='white'
var opentags='<font face="Trebuchet MS"><small>'
var closetags='</small></font>'
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countdown(){
      if (document.layers)
            document.countdownnsmain.visibility="show"
      else if (document.all||document.getElementById)
            crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
      setcountdown()
      countdown()
}

if (document.all||document.getElementById)
      document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown

function countdown(){
      var today=new Date()
      var todayy=today.getYear()
      if (todayy < 1000)
            todayy+=1900
      var todaym=today.getMonth()
      var todayd=today.getDate()
      var todayh=today.getHours()
      var todaymin=today.getMinutes()
      var todaysec=today.getSeconds()
      var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
      futurestring=montharray[mo]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
      dd=Date.parse(futurestring)-Date.parse(todaystring)
      dday=Math.floor(dd/(60*60*1000*24)*1)
      dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
      dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
      dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
      //if on day of occasion
      if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
            if (document.layers){
                  document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
                  document.countdownnsmain.document.countdownnssub.document.close()
            }
            else if (document.all||document.getElementById)
                  crosscount.innerHTML=opentags+message_on_occasion+closetags
            return
      }
      //if passed day of occasion
      else if (dday<=-1){
            if (document.layers){
                  document.countdownnsmain.document.countdownnssub.document.write(opentags+"Event already passed! "+closetags)
                  document.countdownnsmain.document.countdownnssub.document.close()
            }
            else if (document.all||document.getElementById)
                  crosscount.innerHTML=opentags+"Event already passed! "+closetags
            return
      }
      //else, if not yet
      else{
            if (document.layers){
                  document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left till "+occasion+closetags)
                  document.countdownnsmain.document.countdownnssub.document.close()
            }
            else if (document.all||document.getElementById)
                  crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left to "+occasion+closetags
      }
      setTimeout("countdown()",1000)
}
</script>
</head>
<body>
<form name="the_form">
<select name="the_year">
<option value="2005">2005</option>
<option value="2004" selected>2004</option>
<option value="2003">2003</option>
</select>
<select name="the_month">
<option value="0">January</option>
<option value="1" selected>February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="the_date">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">4</option>
</select>
<input type="button" value="Start Countdown" onclick="setcountdown();">
</form>
<ilayer id="countdownnsmain" width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id="countdownnssub" width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer>
</body>
</html>




P.S.  This code can probably be cleaned up quite a bit.
0
 
ellandrdAuthor Commented:
thank you for the code, ill try it when i get home...

get bk to you tomorrow..#

p.s - i didnt write the code, my university pal did...

anyways cheers

sean
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now