Can Not Get JavaScript To Work

KMG&LBZ · Share | #1 (**permalink**) 08-02-2011, 01:08 PM

Heylo, New to the forums, hopefully I'll be around for a while though.

PROBLEM: I'm working on a project for school, and I can't get the javascript to load when I open the file. I've followed all instruction's from my book to the T, and it still isn't working. Validated it at the w3.org validator with 0 error's as well.

Obviously if I post it, the image's wont work, but hopefully the rest can, or you can visually spot my problem. The html work's fine, but the javascript does not show up at all.

Thank You,
~k

Code:

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
<title>Oakwood Elementary School</title>
<script language="javascript" type="text/javascript">
<!--hide from old browsers
		function countDown() {
				var today = new Date()
				var dayofweek = today.toLocalString()
				dayLocate = dayofweek.indexOf(" ")
				weekDay = dayofweek.substring(0, dayLocate)
				newDay = dayofweek.substring(dayLocate)
				dateLocate = newDay.indexOf(",")
				monthDate = newDay.substring(0, dateLocate+1)
				yearLocate = dayofweek.indexOf("2012")
				year = dayofweek.substr(yearLocate, 4)
				
				var ColumbusDay = new Date("Ocober 8, 2012")
				var daysToGo = ColumbusDay.getTime()-today.getTime()
				var daysToColumbusDay = Math.ceil(daysToGo/(1000*60*60*24))
				
				displayDate.innerHTML = "<hs>Today is "+weekDay+" "+monthDate+" "+year+". We have "+daysToColumbusDay+" days until Columbus Day.</h3>"
}
	
		function scrollColor() {
			styleObject=document.getElementsByTagName('html')[0].style
			styleObject.scrollbarFaceColor="#fbb040"
			styleObject.scrollbarTrackColor="#ffe700"
}
			
		function loadInfo(myForm) {
			var menuSelect=myForm.Menu.selectedIndex
			var menuUrl=myForm.Menu.options[menuSelect].value+".html"
			window.location=menuUrl
}
		
		function copyRight() {
			var lastModDate = document.lastModified
			var lastModDate = lastModDate.substring(0,10)
			displayCopyRight.innerHTML = "<h6>The URL of this document is "+document.URL+"<br />Copyright Oakwood Elementary School"+"<br />This document was last modified "+lastModDate+".</h6>
}

//-->
</script>
<style type="text/css">
.center {
	text-align:center;
    }

table {
	margin-left:15%;
	margin-right:15%;
    }
.cell-width {
	width: 50%;
}
	
.left-align {
   width: 50%;
   left: 0;
   }

.right-align {
   width: 50%;
   right: 0;
   text-align: right; 
   } 
  
</style>
</head>
<body onload="scrollColor(); countDown(); copyRight()">
<div class="center">
<p><img src="chapter9Oakwood.jpg" alt="oakwood banner" width="750" height="120" /></p>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;">OAKWOOD ELEMENTARY SCHOOL</p>
<img src="hrzntlrule.jpg" width="700" height="5" alt="hr" />
<div id="displayDate">
</div>

<img src="hrzntlrule.jpg" width="700" height="5" alt="hr" /> </div>
<table>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Oakwood Village School Board</p>
    <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">The Oakwood Village School Board will have monthly meetings on the third Tuesday of the month this fall. Meeting days are September 18, October 16, November 19, and December 18, 2012. All meetings will start promptly at 7:30 p.m. and adjourn by 9 p.m. Meeting days for the spring semester will be determined at the December meeting.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Morning drop off and afternoon pick up</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">Please remember to enter the school drop off area from the south entrance and exit out the north drive way. As always, please watch for children walking to school.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Fall Fund Raiser</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">This fall, Oakwood Elementary School will have a flea market. We are seeking donations of usable items that can be sold at the flea market. Volunteers are needed to help with setup, sales, and post flea market clean up. Mike's Stop and Shop will serve hot dogs, hamburgers and refreshments.</p>
     </td>
  </tr>
  <tr>
    <td class="right-align"><img src="school-house_left.gif" alt="school" width="160" height="139" /></td>
    <td class="left-align">
          <img src="school-house_right.gif" alt="school" width="160" height="139" />
    </td>
  </tr>
    <tr>
    <td colspan="2">
    <form id="announceMenu" action=" ">
      <p style="font-weight:bolder">
       Select an item from the list to see other current announcements:
         <select name="Menu" onchange="loadInfo(this.form)">
           <option>Select an information item</option>
           <option value="chapter09fundraiser">October Fundraiser</option>
           <option value="chapter09pto">October PTO </option>
           <option value="chapter09tests">State Achievement Test</option>
         </select>
      </p>
    </form></td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Attendance Policy:
    <span style="font-family: 'Times New Roman', Times, serif; font-size:8pt">Please call in your child's attendance at 555-555-5555 x2205.</span>
    </p>    
    </td>
  </tr>
</table>
<p></p>
<div id="displayCopyRight">
</div>
</body>
</html>

**HTMLBasicTutor** · #2 (**permalink**) 08-02-2011, 07:47 PM

Seeing this is homework, we can't solve this for you but can give some hints.

1 . If you use IE to view the page, down in the bottom right corner of the status bar a yellow warning sign will appear when your script is not working. Click that and it will tell you what line and character point it found an error.

2 . You can use alerts to check your variables are working/have the correct info in them.

3 . Javascript is very picky. Print out your coding and review every line, character and space with the example in your textbook. Sometimes it's just easier to wipe it out and start over. Maybe do one function at a time. Once you get that working, move onto the next one.

KMG&LBZ · #3 (**permalink**) 08-03-2011, 07:18 AM

Okay, I'm sorry, didn't make myself clear. This is not an assignment, this is the chapter work, which I get step by step threw the chapter. My homework is something completely different about some college ice cream shop or something(don't care about the content as long as I do the code right).

I have followed the step's they lay out for me 1 by 1, three separate times. Each time starting over with a fresh copy of the uncompleted page.

Now I don't want this to interfere with a possible answer, but I have tried it on Firefox 5.01, Firefox 6.01(beta), and Google Chrome. IE is the devil. Could someone else try this code on their computer and see if, in the least, the scroll bar changes colors(as it is supposed to)?

Thank You much,
~k

**HTMLBasicTutor** · #4 (**permalink**) 08-03-2011, 09:13 AM

Last night when I tried your code in IE8 the scroll bars did change colour.

Can you post your latest version (in case you made changes from what you posted previously)?

KMG&LBZ · #5 (**permalink**) 08-03-2011, 10:19 AM

Nope that was it. Guess I'll have to change over to IE9... :-( maybe I'll go find an IE8 DL. TYVM! And I'll be here a lot more often, Quick response's and exactly what I needed.

KMG&LBZ · #6 (**permalink**) 08-03-2011, 01:50 PM

The scroll worked, the other two things didn't,(date countdown, and copyright information). Found the same code online already posted with the fix. Used it and it works now.

**HTMLBasicTutor** · #7 (**permalink**) 08-03-2011, 02:14 PM

That's good, but did you learn anything by using the solution you found?