The Countdown feature is experiencing loading difficulties

DISCLAIMER: THIS IS NOT SCHOOLWORK!

Currently enrolled in an HTML/CSS course, I have reached the Javascript section. To better understand the homework assignments, I start by replicating the example problems provided in the textbook. However, when I ran the code in Safari, none of the Javascript functions seem to be working. Despite ensuring that I copied everything correctly from the book, the countdown feature to a specific date does not load as expected.

It appears that none of the Javascript elements are populating on the page. My hunch is that there may be an issue with innerHTML functionality, but my knowledge of JS is limited for further diagnosis.

I would greatly appreciate any guidance or tips you could offer!

The final webpage should resemble this design: LINK

However, mine currently 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+" "+monthDate+" "+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+" "+monthDate+" "+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>
javascripthtmlcss

Answer №1

Upon closer inspection of the javascript code, two errors have been identified:

  • The countDown() function inconsistently uses a variable name - it is initially defined as monthDate, but later referenced as monthDay.
  • In the copyright() function, three variables are attempted to be used - weekDay, monthDay (echoing the previous error), and year. However, since these variables were declared within the countDown() function, they are out of scope and inaccessible from within the copyright() function.

(To view detailed error messages related to this, access the browser's console.)

Additionally, there is questionable code present:

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

This snippet of code attempts to locate the string '2017' within a date and extract the four digits following that position. In essence, it simply sets year="2017", rendering the complex manipulation unnecessary. This unconventional coding approach raises concerns regarding its validity and practicality.

(It's worth noting that manipulating strings for dates is not recommended due to potential inconsistencies in different user locales where date representations vary. Utilizing a date object and accessing the year using getFullYear() would ensure more reliable outcomes.)

An Evaluation of the Textbook

Your indication that the source of this code dates back to a textbook published in 2012 suggests significant obsolescence considering the rapid advancements in the realm of javascript over the past few years.

The textbook appears to employ outdated or subpar methods such as inline css, table-based layouts, string manipulations for dates, and reliance on DOM element IDs as global window variables. The latter practice, highlighted by duskwoof in the comments, hampers effective debugging and integration with HTML elements. It is advisable to explicitly declare variables using document.getElementById() instead of assuming their existence as window properties.

It is crucial to recognize that the teachings derived from this book may not align with contemporary industry standards. If you indeed enlisted in an "OE/OE class" associated with this material, it might be prudent to reconsider its value, particularly if monetary resources were allocated towards it. Seeking reimbursement could be a reasonable course of action if substantial discrepancies persist.

Answer №2

Double check that the example was accurately copied from the textbook. If it was:

JavaScript

In the countDown function, there is a typo with "monthDate" which should be corrected to "monhDay" and replaced with:

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

A portion of the code in copyright has been interchanged with code from the countDown function, and can be updated 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 lacking a container element with an id attribute set to "displayCountDown" between two image horizontal rulers at the top of the page. Insert the following to rectify this issue:

<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 stage, the example should function correctly. However:

  • Some variables in countDown are missing the var declaration.
  • Several variables in countDown are not utilized.
  • The code assumes global variables are automatically created for elements with ID values in HTML, as originally done by IE, but current standards differ. It's recommended to use document.getElementById to access elements without assuming global variables.
  • The code relies on automatic semi-colon insertion for statement termination, which is a topic of debate - see here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Circular reference in Angular/TypeScript

I encountered a circular dependency issue in my Angular project and tried various solutions, including exporting all dependent classes from a "single file" as suggested here. Unfortunately, this approach did not work for me. I then explored other solutions ...

javascriptangulartypescriptdependency-injectioncircular-dependency

Comparison between storing data locally and using AngularJS $cacheFactory

I'm facing a challenge with storing large amounts of client-side data and I'm unsure of the best approach to take. Currently, I am utilizing AngularJS's cacheFactory which is effective, but all the data gets reloaded with each new session. W ...

javascriptangularjslocal-storage

Setting the default radio button selection in Angular 2

Present within my interface are two radio buttons, not dynamically produced: <input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" [value]="['+recordStartDate']">Ascending<br> <input type="radio" name="order ...

javascripthtmlangularradio-buttonchecked

Implement a datepicker functionality once the document has been successfully fetched through an ajax

I've successfully added datepicker functionality to textfields, but when attempting to apply it to a document loaded into a div, it fails. The document is loaded with <a href="javascript:;" onclick="FAjax('form_ajustes_salida.php',&apo ...

javascriptphpjqueryhtmldatepicker

Astro3.0 unable to locate images

I'm working on a simple astro project that is structured like this: └── src    ├── assets    │   └── images    │      └── blend.webp    ├── components    │   └── CoffeeCard.astro    ...

javascriptastrojs

What are the advantages and disadvantages of using the picture element in web design?

What advantages and disadvantages come with using the HTML5 picture element? Specifically, does the browser download all images or only the image that matches the media query? ...

htmlimageperformancepicture-element

Retrieving the name of a child from a Firebase database

My database I am trying to extract the names of children from my database. The names include Coffee, Latte, Tea, and Ade. Any suggestions on how I can retrieve this information? ...

javascriptdatabasefirebasevue.jsfirebase-realtime-database

Partial postback support for numerical values in animations

Recently, I incorporated an animation into a design: .map > img:hover { -webkit-animation-name: MapFloatingChrome; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; ... to {-moz-tra ...

cssasp.nettelerikpartial-postback

The Faux-Dynamic News Feed on a stationary website

As I work on revamping my employer's static website, it has become clear that a news section needs to be integrated. The site is being built using the Bootstrap 3.0 framework. My plan is to implement the following strategy: I aim to have a JavaScrip ...

javascriptjsonhtmltwitter-bootstrap

Creating string enums in NextJS with TypeScript

I am working on my nextjs application and I have a component with a prop that is a string. I decided to create an enum, so I attempted the following: enum Label { dermatology = 'Dermatologi', psychology = 'Psykologi', rheumatology = ...

javascriptreactjstypescriptnext.js

Is there a way to update the parameter name in an array.map function?

I'm a little unsure. Is there a way to dynamically change the marker parameter to marker1, marker2, marker3, and so on depending on the number of elements in the map? Currently, I have this code but I would like each element in the map to have a mark ...

javascriptreactjsarraysarray.prototype.map

Using a texture image to create transparency masks in three.js

How can I create a mask effect on my scene? I came across this awesome jsfiddle: https://jsfiddle.net/f2Lommf5/4703/ I am interested in making the white part of that texture transparent so that I can crop my background object based on the plane texture ab ...

javascriptthree.js

"Attempting to access $scope within the $http call results in an

Exploring my Angular code angular.module('MyApp'). controller('ProductController', function ($scope, DropDownService) { $scope.Product = {}; $scope.ProductCategoryList = null; DropDownService.GetCategory().then(function ( ...

javascriptangularjsc#-4.0

Issue with iOS Mobile Safari Navigation Bar/Toolbar when changing orientation

Experiencing some unexpected behavior with iOS mobile safari on version 13.3. I have a website that functions as a single page application for the most part. Due to this, I have set its height/width at 100% and adjusted the content accordingly. While ever ...

htmlcssmobile-safari

Tips for aligning a div within a flexbox to the bottom position

I'm having trouble aligning the div at the bottom of the flex box. I attempted to use align-content: flex-end; but it didn't work. Is there a way to keep the <.div class="parameters"> at the bottom of the row? Especially when the ...

htmlcss

What types of devices are compatible with the different versions of the Android operating system?

I am currently working on a jquerymobile application for Android versions 2, 3, and 4, as well as iPhone, iPad, and iPod touch. I am analyzing user-agent strings using jQuery and jquerymobile. After testing with an emulator, I have noticed that all device ...

jqueryandroidhtmljquery-mobile

How can I show the configuration in Laravel?

After updating my pages to utilize an extended header for consistent content across all pages, I encountered an issue with the footer configuration. Whenever I attempt to retrieve a configuration from Laravel, it appears as normal text instead of being pro ...

phphtmlcsslaravel

Hiding and displaying DIVs on a single HTML page using VueJs 2

I am currently working on building an application that is not a single page application. As I develop my project, I have several div elements on the page that I want to toggle visibility step by step. Below is the snippet of my code: <div v-if="sect ...

javascriptvue.jsvuejs2

A guide on creating a clickable polygon in Vue.js using Konva

Is there a way to create an interactive polygon in Vue Konva where I can set each corner with a click? I haven't been able to find any resources other than the v-polygon which only creates predefined polygons. ...

javascripthtmlvue.jskonvajsvue-konva

Change ES6 JavaScript to ES5 standard

Is there a way to transform this code snippet from other questions into ES5 format? I am attempting to extract data from a JSON array. var match = function(query, input) { return input.filter(function(entry) { return Object.entries(query).every(fun ...

javascriptjson