JavaScript Forum

**bad hair day** · 08-13-2006, 04:30 PM

Hi All

I am struggling with something and thought someone here must be able to point me in the right direction

I have an external js file that has a date function set up like the following:

//JavaScript Document

dayName = new Array ("Sunday","Monday","Tuesday"
,"Wednesday","Thursday","Friday","Saturday")

monName = new Array ("January","February","March"
,"April","May","June","July","August","Septembe r"
,"October","November","December")

now = new Date

if (now.getDate() == 1 || now.getDate() == 21 || now.getDate() == 31)
{x="st"}
else
if (now.getDate() == 2 || now.getDate() == 22)
{x="nd"}
else
if (now.getDate() == 3 || now.getDate() == 23)
{x="rd"}
else
{x="th"}

From that the code in my document is:

<div class="daydisplay">
<script language="JavaScript" type="text/javascript">
document.write(dayName[now.getDay()] + ", " + monName[now.getMonth()] +
" " + now.getDate() + x + " " + now.getFullYear())
</script>
</div>

So far so good, does exactly what I want. However, I also want to use the results from the date function to do one other thing. The site I am building is for a F1 fan site, and I want it to say what the next round is based upon what the date is now, eg, if the date is 13th August and the next race is on the 20th Aug it will say where the next race is automatically, and then change itself when the date applies to the next race. Do I make any sense?

So I dont have to keep changing things manually. I thought I nearly had it earlier but alas, back to the drawing board.

Any help much appreciated. Thanks BHD

**Oneway** · 08-13-2006, 09:28 PM

Here you go!

HTML Code:

<html>
    <head>
        <script type="text/javascript">
            //<!--
            //Create all events date first(year,month,day), then the description
            //Make sure events are in chronological order.
            var F1events = new Array();
            F1events.push('2006,4,2');
            F1events.push('Monaco');
            F1events.push('2006,9,8');
            F1events.push('Hockenheim');
            F1events.push('2006,10,8');
            F1events.push('Hungaro Ring');

            function ShowEvent() {
                var EventDate, EventName;
                var now = new Date();

                for(var i = 0; i < F1events.length; i = i + 2)
                { //Loop through array with 2 steps at a time
                    //Extract info for date and create date object.
                    EventDate = new Date(F1events[i]);

                    if(now.getTime() <= EventDate.getTime())
                    {    //Found date is still in the future
                        //Construct displaytext
                        EventName = F1events[i + 1];
                        var EventString = (EventDate.getMonth() + 1) + "-" +EventDate.getDate() + "-" + EventDate.getFullYear();
                        EventString += " : " + EventName;

                        var elem  = document.getElementById('nextevent');
                        elem.innerHTML = EventString;

                        break; //Break out of the loop
                    }
                }
            }
            //-->
        </script>
    <head>
    <body onload="ShowEvent()">

        <span id="nextevent">Upcoming Event</span>

    </body>
</html>

**bad hair day** · 08-14-2006, 04:12 PM

Hi Tried that but it seems nothing happens. Maybe I am being dense as I am not that good at javascript (hey at least I know its not the same as Java :-) )

Do I need to add some document.write stuff at the bottom? As I say, apologies if stupid question but I am not that good at js.

Thanks

**Oneway** · 05:25 PM

Sorry mate, in posting the code all the linebreaks got lost and everything gets interpreted as a comment in the browser.

But it did make me aware of a little inconcistency in the IE Javacsript Date object.

Hope this way it'll be better.

Code:

<html>
  <head>
    <script type="text/javascript">
        //<!-- 
        //Create all events date first(year,month,day), then the description 
        //Make sure events are in chronological order. 
        var F1events = new Array(); 
        F1events.push('2006,4,2'); 
        F1events.push('Monaco'); 
        F1events.push('2006,9,8'); 
        F1events.push('Hockenheim'); 
        F1events.push('2006,10,8'); 
        F1events.push('Hungaro Ring'); 
        
        function ShowEvent() 
        { 
            var EventDate, EventName; 
            var now = new Date(); 
            for(var i = 0; i < F1events.length; i = i + 2) 
            { //Loop through array with 2 steps at a time 
                //Extract info for date and create date object. 
                var DateElems = F1events[i].split(',');
                EventDate = new Date(DateElems[0],DateElems[1],DateElems[2]); 
                if(now.getTime() <= EventDate.getTime() ) 
                { //Found date is still in the future 
                    
                    //Construct displaytext 
                    EventName = F1events[i + 1]; 
                    var EventString = (EventDate.getMonth() + 1) + "-" +EventDate.getDate() + "-" + EventDate.getFullYear();
                    EventString += " : " + EventName; 
                    
                    var elem = document.getElementById('nextevent'); elem.innerHTML = EventString;
                    break; //Break out of the loop 
                } 
            } 
        }
        //-->  
      </script>  
  <head>  
  <body onload="ShowEvent()">
      <span id="nextevent">Upcoming Event</span>  
  </body> 
</html>

The linebreaks seem to hold this time so it should work for you.
Just copy and paste the complete code into an emty html document and start editing to your likins from there.
Have Fun!

**bad hair day** · 08-14-2006, 05:54 PM

wow, many thanks, that works just how I wanted it to, I cant tell you how happy I am at that.

Again, many thanks.......