SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    NS, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down Can't run script from an external JS file!

    It's been while since I've doen any web development and the lights aren't on, so I think I just some refreshing here!! I found a free javascript countdown script that I want to use on my website, and it may not be the best for what I want to use it for, but it will do! I have it working perfectly if I embed the javascript in the body of the html file below the form to which is displaying the countdown, but when I try to move the javascript to an external .js file and I reference the file in the html, I keep receiving a javascript error and nothing is displayed:

    Line: 18
    Char: 1
    Error: 'montharray' is null or not an object
    Code: 0

    Here is what my html code looks like when it works:

    Code:
    <html>
    <head>
    <title>JavaScript Countdown timer test</title>
    
    		<style type="text/css">
    			A {text-decoration:none; color:#CCCC66;}
    			A:active {text-decoration:none; color:#CCCC66;}
    			A:visited {text-decoration:none; color:#CCCC66;}
    			A:hover {text-decoration:none; color:#00FFFF;}
    			body {background-color:black}
    			.countclass {background-color:#000000; color:#FFFFFF; border-color:#000000; font-size:12px; font-family:Verdana; font-weight:bold; text-align:center;}
    		</style>
            
    </head>
    
    <body>
    
    <center>
    <form name="count">
    	<input type="text" size="50" name="count2" class="countclass" readonly  />
    </form>
    </center>
    
    <script>
    
    //change the text below to reflect your own,
    //var before="May 1st!"
    var current=document.forms.count.count2.value
    var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
    
    function countdown(yr,m,d){
    theyear=yr;themonth=m;theday=d
    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[m-1]+" "+d+", "+yr
    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(dday==0&&dhour==0&&dmin==0&&dsec==0){
    document.forms.count.count2.value=current
    return
    }
    else
    document.forms.count.count2.value=dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds "
    setTimeout("countdown(theyear,themonth,theday)",1000)
    }
    //enter the count down date using the format year/month/day
    countdown(2008,4,28)
    </script>
    
    </body>
    
    </html>
    Here is what my html code looks like without the javascript code:

    Code:
    <html>
    <head>
    <title>JavaScript Countdown timer test</title>
    
    		<style type="text/css">
    			A {text-decoration:none; color:#CCCC66;}
    			A:active {text-decoration:none; color:#CCCC66;}
    			A:visited {text-decoration:none; color:#CCCC66;}
    			A:hover {text-decoration:none; color:#00FFFF;}
    			body {background-color:black}
    			.countclass {background-color:#000000; color:#FFFFFF; border-color:#000000; font-size:12px; font-family:Verdana; font-weight:bold; text-align:center;}
    		</style>
            
            <script language="JavaScript1.6" type="text/javascript" src="temp.js"></script>
            
    </head>
    
    <body onload="countdown()">
    
    <center>
    <form name="count">
    	<input type="text" size="50" name="count2" class="countclass" readonly  />
    </form>
    </center>
    
    </body>
    
    </html>
    And here is the javascript in the temp.js file referenced in the previous html code:

    Code:
    //change the text below to reflect your own,
    //var before="May 1st!"
    var current=document.forms.count.count2.value
    var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
    
    function countdown(yr,m,d){
    theyear=yr;themonth=m;theday=d
    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[m-1]+" "+d+", "+yr
    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(dday==0&&dhour==0&&dmin==0&&dsec==0){
    document.forms.count.count2.value=current
    return
    }
    else
    document.forms.count.count2.value=dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds "
    setTimeout("countdown(theyear,themonth,theday)",1000)
    }
    //enter the count down date using the format year/month/day
    countdown(2008,4,28)
    Any idea why it isn't working when I mvoe the javascript to a .js file?? I'm sure it's something stupid I'm just missing!!

    Thx a bunch!!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your calling countdown with no attributes when the page loads as well as calling it with parameters when the javascript is loaded.

    remove

    Code:
    countdown(2008,4,28)
    from the external js, and replace it with:

    Code:
    window.onload = function() {
    countdown(2008,4,28);
    }
    And finally remove the onload event from the body tag.


  3. #3
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    NS, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply! I appreciate your help. I did find the solution, which is pretty much what you suggested gRoberts, and if anyone's interested, have a look at this thread:

    http://forums.devshed.com/javascript...le-526072.html

    On another quick note, I do have one more small request!



    One more question that I hope you or someone else can help me with. Below is an example of what my html form code looks like now:

    Code:
    <input type="text" size="50" name="count2" class="countclass" />
    and here is an example of my css code for the text box:

    Code:
    .countclass {background-color:#000000; color:#FFFFFF; border:none; font-size:12px; font-family:Arial; font-weight:900; text-align:left;}
    If I wanted to change my html form code so that the text box resizes automatically according to how much time is left in the countdown, how would I do that? I imagine I would start by removing the -- size="50" -- attribute and perhaps use css to make it resize automatically as the countdown grows or shrinks? Any ideas??

    Thx again!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •