-2

DISCLAIMER: THIS ISN'T HOMEWORK!

I'm taking a OE/OE class on HTML/CSS and I just got to the Javascript portion of the class. Before I attempt the homework for each chapter, I copy the example problem the book walks you through so that I understand what I am going into. Unexpectedly, when I ran the file in Safari, none of the Javascript worked! I double checked to make sure I'd copied everything the book said, and I did, but it just didn't work! The javascript is supposed to have a countdown to a specific date where it tells you how long until the date, but the countdown isn't loading.

None of the Javascript elements are loading onto the page. I feel like it has something to do with innerHTML not working correctly, but I don't know enough about JS to elaborate further.

I'd really appreciate any pointers that you guys could offer!

The finished page is supposed to look like this: LINK

But mine looks like this: LINK

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>Chapter 9-1 Midwest Bridal Expo</title>
<script type="text/javascript">
<!--
function countDown() {
    var today = new Date()
    var dayOfWeek = today.toLocaleString()
    dayLocate = dayOfWeek.indexOf(" ")
    weekDay = dayOfWeek.substring(0, dayLocate)
    newDay = dayOfWeek.substring(dayLocate)
    dateLocate = newDay.indexOf(",")
    monthDate = newDay.substring(0, dateLocate+1)
    yearLocate = dayOfWeek.indexOf("2017")
    year = dayOfWeek.substr(yearLocate, 4)

    var bridalExpo = new Date("February 12, 2018")
    var daysToGo = bridalExpo.getTime()-today.getTime()
    var daysToBridalExpo = Math.ceil(daysToGo/(1000*60*60*24))

    displayCountDown.innerHTML = "<p style='font-size: 12pt; font-family:helvetica;'>Today is "+weekDay+" "+monthDay+" "+year+". We have "+daysToBridalExpo+" days until the Midwest Bridal Expo.</p>"
}

function scrollColor() {
    styleObject=document.getElementsByTagName('html')[0].style
    styleObject=scrollbarFaceColor="#ffde5b"
    styleObject=scrollbarTrackColor="#ffba00"
}

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
    lastModDate = lastModDate.substring(0,10)
    displayCopyright.innerHTML = "<p style='font-size: 12pt; font-family:helvetica;'>Today is "+weekDay+" "+monthDay+" "+year+". We have "+daysToBridalExpo+" days until the Midwest Bridal Expo.</p>"
}

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

img {
    border:0px;
}

.left-align {
    width: 50%;
    left: 0;
}

.right-align {
    width: 50%;
    right: 0;
    text-align: right; 
} 

table {
    width: 80%;
    margin-right: 10%;
    margin-left: 10%;
}

td {
    padding: 5px;
}

</style>
</head>
<body onLoad="scrollColor(); countDown(); copyright()">
<div class="center">
<p><img src="chapter9-1banner.jpg" width="747" height="160" alt="Bridal Expo Banner"></p>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;">Midwest Bridal Expo</p>
<img src="hrimg-wedding-burgundy.jpg" width="750" height="5" alt="hr">
<div id="displayCountDown">
</div>
<img src="hrimg-wedding-burgundy.jpg" width="750" height="5" alt="horizonal rule">
</div>
<table class="centerTable">
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Planning your summer or fall wedding</p>
    <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">The Midwest Bridal Expo opens in Michigan on February 12, 2014 at the Ford Convention Center. This Expo is for all couples planning to get married in the next year, with an emphasis on those planning a summer or fall wedding. We have assembled a group of experts from all areas of wedding planning to help you plan your perfect day.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">What awaits you</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">Our full day of events include seminars with keynote speakers, one-on-one sessions with professional wedding planners, and various vendors from bakers to photographers with experience at all levels of wedding planning. You will be able to sample wedding cakes,  see photo galleries by acclaimed photographers, and meet with hall rental representatives. And do not forget to discuss whether you want a live band or a DJ to provide music at that all-important reception.</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">When you arrive, be sure to register for the grand prize drawing. Many of the individual vendors will also have raffles at their booths for special prizes, like free wedding cakes, free limo service, or free bouquets for the bride.</p></td>
  </tr>
  <tr>
    <td class="right-align"><img src="393px-Wedding_cake_with_pillar_supports,_2009.jpg" width="197" height="300" alt="" style="background-color: #7f1100"></td>
    <td class="left-align"><img src="Western_wedding_dress_in_Taiwan.jpg" width="226" height="300" alt="" style="background-color: #7f1100"></td>
  </tr>
  <tr>
    <td colspan="2">
    <form id="announceMenu">
      <p style="font-weight:bolder">
       For more information about the Expo:
         <select name="Menu" onChange="loadInfo(this.form)">
           <option>Select a topic</option>
           <option value="chapter09vendor">Vendor List</option>
           <option value="chapter09schedule">Schedule</option>
           <option value="chapter09tips">Wedding Tips</option>
         </select>
      </p>
    </form>
    </td>
 <tr>
    <td colspan="2"><p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Ticket Information: <span style="font-family: 'Times New Roman', Times, serif; font-size: 10pt">For ticket reservations </span><span style="font-family: 'Times New Roman', Times, serif; font-size:8pt">call 555-555-5555 x2205. Early bird ticket holders get a 10% discount..</span></p>    
</td>
  </tr>
</table>
<p></p>
<div id="displayCopyright">

</div>
</body>
</html>
D Walters
  • 13
  • 2
  • Don't point to some image on a third party site that will disappear one day helping no one. Always include everything here or this question will be closed. [mcve] In addition, we have no clue what "doesn't work". That is not a technical term. – Rob Aug 06 '17 at 01:43
  • 1
    What book are you using? How old is it? This looks like pre-DOM Javascript, which has been… I won't say "deprecated", but certainly _not recommended_ for at least the last 10 years. –  Aug 06 '17 at 01:55
  • Rob, imgur is a very trustworthy image host site and has been used by reddit for over 5 years. Thank you for the feedback, I edited my post which now specifies the problem a bit better. This is my first time posting on this site, so I apologize if I'm not quite up to par. – D Walters Aug 06 '17 at 02:10
  • duskwuff, this book is pretty new (2012), so if what you're saying is true, that's pretty worrying to say the least! – D Walters Aug 06 '17 at 02:13
  • It doesn't matter how trustworthy imgur is. You are required to post the elements here and not there. Read the link I gave you. imgur deletes images after a period of time. Also, it's possible to use imgur through a stackoverflow sub. I'm still not sure what the problem is. – Rob Aug 06 '17 at 02:34
  • Rob, I just explained the issue further in the post. Sorry, I'm not very experienced in JS, so I'm not sure how to fully explain what might've gone wrong. Also, I don't have enough reputation to use embedded images, or else I would've done that and the image hosting on embedded images here is done through imgur so it's not as if it's any more likely to disappear. – D Walters Aug 06 '17 at 02:56
  • If you are unable to describe the problem in words, then you need to rethink your question, delete this one, and start again. – Rob Aug 06 '17 at 03:03

2 Answers2

2

There are two plain errors in the javascript:

  • the countDown() function changes its mind about a variable name: it's defined as monthDate, but later tries to use it as monthDay, and
  • the copyright() function tries to use three variables -- weekDay, monthDay (repeating the above error), and year. But these variables were defined inside countDown(), so are out of scope and unusable inside the copyright() function.

(If you open up the browser's console you'll be able to see error messages for that sort of thing.)

There's also, um, whatever this is:

yearLocate = dayOfWeek.indexOf("2017")
year = dayOfWeek.substr(yearLocate, 4)

That's some impressively garbage code right there, that is. It's literally saying "find the location of the string '2017' in the date, then take the four digits from that location." You might just as well cut out the middleman and say year="2017", because that's the only time it would work anyway. I'm stunned that anyone would write something like that into a textbook with a straight face.

(In any case, string manipulation is not how to work with dates -- it'll break in different user locales, which use different string representations for dates. In real life you'd use a date object, and get the year with getFullYear().)

So... about that textbook...

You mentioned above that the book this code came from is from 2012 -- the last five years have been, well, let's just say very busy years in the javascript world, so it'd be outdated in the best of circumstances.

But it's using a lot of techniques that were outdated or bad practice even at the time -- inline css, tables for layout(!), string manipulation of dates, and (as duskwoof pointed out in comments, hence the total rewrite of this answer) depending on DOM elements with IDs to be global window variables. This last one was never widely used even back in the day, and makes the javascript impossible to debug separately from the HTML. It's a much better idea to explicitly define these as variables using document.getElementById() rather than depending on them to just show up as named variables on the window object.

You should be aware that what you're learning from this book is not how things are done these days, at all. I don't know what an "OE/OE class" is, but I hope you're not paying money for it (and if you are, I'd ask for a refund.)

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
  • You're right, I did miss that (the book pointed it out earlier before the javascript started). Unfortunately, this is not a problem I am supposed to solve, every chapter has these examples and each one I've done until this one has worked once the instructions are over. Thanks for your help though, Daniel! – D Walters Aug 06 '17 at 01:26
  • I think this code is depending on all elements with IDs being available as document globals. :/ –  Aug 06 '17 at 01:55
  • Ah, you're probably right @duskwuff. I always forget that was ever even a thing, it's such bad practice.... – Daniel Beck Aug 06 '17 at 11:01
  • @DWalters -- duskwoof correctly pointed out that the code was depending on a bad technique i'd forgotten ever existed, which made the earlier version of this answer half wrong (the div was missing, which you've already fixed in the question text.) I've updated with more detail now that I've taken a closer look at the rest of the code.) – Daniel Beck Aug 06 '17 at 12:08
0

Please recheck that the example was copied from the text book correctly. Because if it was:

JavaScript

In the countDown function, "monthDate" is a typo for "monhDay" and should read:

        var monthDay = newDay.substring(0, dateLocate+1)

Part of the code in copyright has been replaced with code from the countDown function and can be replaced with:

function copyright() {
    var lastModDate = document.lastModified
    lastModDate = lastModDate.substring(0,10)
    displayCopyright.innerHTML = "<p style='font-size: 12pt; font-family:helvetica;'>"
      + "The URL of this document is " + window.location
      + "<br>This document was last modified " + lastModDate + ".</p>"

HTML

The HTML is missing a container element with id attribute value of "displayCountDown" between the two image horizontal rulers at the top of the page. Insert one to make the code read as:

<img src="hrimg-wedding-burgundy.jpg" width="750" height="5" alt="hr">
    <p id="displayCountDown"></p>
<img src="hrimg-wedding-burgundy.jpg" width="750" height="5" alt="horizontal rule">

Other

At this point the example should work. However:

  • half the variables in countDown are missing var in their declaration.
  • many of the variables in countDown are unused.
  • code assumes global variables are automatically created for HTML elements which have id values, as originally implemented by IE. Current standards only now agree with this, and usage restricts script from declaring global identifiers for variables or functions with the same name as HTML element id values. document.getElementById is the standard alternative to access elements without assuming the validity and presence of global variables.
  • code uses automatic semi-colon insertion to terminate statements. The merit of this is subject to debate.
traktor
  • 17,588
  • 4
  • 32
  • 53