#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    13
    Rep Power
    0

    Confused why this won't work


    Okay so I have checked over this HTML and Javascript nearly 100 times and I see no reason why it is not working. Could it be my IE browser version? This is exactly what they have in the book code wise and it still doesn't work. The book is about a year old...

    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 type="text/javascript">
    <!--hide from old browsers
    function countDown(){
    	var today = new Date()
    	var dayofweek = today.toLocalString()
    	dayLocate = dayofweek.indexOf(" ")
    	weekday = dayofweek.substring(dayLocate)
    	dateLocate = newDay.indexOf(",")
    	monthDate = newDay.substring(0, dateLocate+1)
    	yearLocate = dayofweek.indexOf("2013")
    	year = dayofweek.substr(yearLocate, 4)
    	
    	var ColumbusDay = new Date("October 14, 2013")
    	var daysToGo = ColumbusDay.getTime()-today.getTime()
    	var daysToGoColumbusDay = Math.ceil(daysToGo/(1000*60*60*24))
    	
    	displayDate.innerHTML = "<h3>Today is "+weekDay+" "+monthDate+" "+year+". We Have "+daysToGoColumbusDay+" 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>
    Sorry forgot to mention the main problems.

    None of my Javascript functions won't display for instances, displayDate won't show anything. This is my very first time doing Javascript so I don't know if it displays errors or not but I'm not getting any feedback from these scripts.
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Hi,

    instead of checking the code 100 times, a 10 second Google search (or a quick look into the manual) would have told you how to get to the JavaScript console or your browser.

    To cut it short: The code is a mess.

    • Leaving out all semicolons is a terrible idea. JavaScript does have automatic semicolon insertion, but this feature is very error-prone and massively reduces the clarity of the code. That's why nobody uses it -- except your book, obviously.
    • Strings cannot span multiple source code lines. You need to put each line in a separate string and then concatenate everything.
    • The </h6> in line 45 isn't quoted correctly.
    • toLocalString() in line 13 must be toLocaleString()
    • weekday in line 15 must be weekDay to match the spelling in line 25
    • newDay in line 16 and 17 isn't defined anywhere.
    • scrollbarFaceColor in line 30 and 31 only exists in the Internet Explorer (and Opera).


    I'm sure there's more, but I didn't dig deeper.

    To avoid such problems, write your code step by step and test each part before moving on. There's nothing worse than having to debug hundreds of lines of broken code without any possibility to sort out the working parts.

    Also, use an IDE to avoid obvious errors like broken syntax, wrong spelling etc.

    Comments on this post

    • web_loone08 agrees : Very pointed error catching eyes; I saw the majority of those as well.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    13
    Rep Power
    0

    Thank you


    Thanks for your help. I was really debating whether or not I should post this on here I could tell that this was just terrible code. I had to start somewhere and I find that the best information is from people on here. I'm thankful.

    Also, the book is HTML, XHTML, and CSS - Shelly,Woods,Dorin
    Sixth edition if anyone was wondering.

    This is also a class at Purdue University
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    I am not sure, if you left some stuff out or the book did; but I changed some stuff around and formatted some stuff (basically got rid of the invalid syntax and "fluff"). You will notice that I introduced the toDateString() and the split() global functions. This toDateString() global date function; formats your date, so it appears "prettified" and the split() global string function; just cuts out chunks (and... inserts them into a dynamic array) from the formatted date and displays only those chunks (also known as array keys), that you specify. Anyway, here is your "somewhat" overhauled example; if I overlooked anything, just let me know and we will see what we can do from there:
    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 type="text/javascript">
    <!--hide from old browsers
    function countDown(){
    	var today = new Date();
    	var dayofweek = today.toLocaleString();
    	var weekday = today.toDateString().split(" ");
    	var yearLocate = dayofweek.indexOf("2013");
    	var year = dayofweek.substr(yearLocate, 4);
    	
    	var ColumbusDay = new Date("October 14, 2013");
    	var daysToGo = ColumbusDay.getTime()-today.getTime();
    	var daysToGoColumbusDay = Math.ceil(daysToGo/(1000*60*60*24));
    	
    	document.getElementById("displayDate").innerHTML = "<h3>Today is " + weekday[0] + " " + weekday[1]  + " " + weekday[2] + ", " + year + ". We Have" + daysToGoColumbusDay + "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)
    	document.getElementById("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>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    13
    Rep Power
    0
    The only part you left out was that you're a badass. What kind of IDE or development software do you use for websites? This class has us using Notepad++. I won't be submitting this to the teacher though because it is much different than what the book has. The code I posted was the book verbatim; except a few changes that I made while messing with the code. The book gives the complete code stating that it should work as is. Thanks mate!
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Tell your teacher, that your books needs to be written by a Web Developer (hand coder); not just a Web Designer (GUI/IDE coder). Which is probably exactly what the authors of that book are... Web Designers... lol. Anyway, thanks for that rep, I like it. I do not use any type of IDE or software; other then Chrome's and Firefox's Developer Tools. In Chrome, that's basically... the built in console and in FireFox, I have used the FireBug Add-On; in the past. No, I just hand code in Notepad and test offline (locally) and online (via server), as needed. My best advice to you; in becoming a proficient Web Developer; is bone up on several different online tutorials... honestly, that's how I learned; I am self taught. Start out with some basic JavaScript tutorials and make sure you have a good foundation in HTML and CSS, as well. Then go from there, into the more advanced stuff. Good Luck

IMN logo majestic logo threadwatch logo seochat tools logo