HTML How do I display a timer using javascript?

Question

I am having a problem displaying a timer for a website. The timer should appear between the two parallel bars that have nothing in between them. Also, my links at the bottom of the page are not taking me to the correct pages. As a matter of fact the pages don`t go anywhere is the problem. Here is my code so far:

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

    var bridalExpo = new Date("February 12, 2015")
    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.scrollFaceColor="#ffde5d"
    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
    var lastModDate = lastModDate.substring(0,10)
    displayCopyRight.innerHTML="<p style='font-size:8pt; font-weight:bold;'> The URL of this document is "+document.URL+"<br/>Midwest Bridal Expo"+"<br/> This document was last modified "+lastModDate+".</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>

You should really attempt to boil this down to the minimum amount of code that produces the bug. Putting into a runnable environment like plnkr.co or jsfiddle.net would also help — Kyeotic
– Kyeotic, Commented Apr 15, 2015 at 23:46
you could google and the first result is this: w3schools.com/js/tryit.asp?filename=tryjs_timing_clock — Abdul Ahmad
– Abdul Ahmad, Commented Apr 15, 2015 at 23:47
var menuUrl=myForm.Menu.options[menuSelect].value".html" is not valid javascript, there is no such function as Date.LocaleString() etc etc — Pero P.
– Pero P., Commented Apr 15, 2015 at 23:58
Step one in any instance like this to check the error console. That will at least lead you in the direction of getting rid of error's like the ones @pero and sergiomse have pointed out. — Jon P
– Jon P, Commented Apr 16, 2015 at 0:14

sergiomse · Accepted Answer · 2015-04-15 23:50:53Z

You have some errors in your code:

Comments in HTML are in the form:  not <--Hide from old browsers
The indexOf() method is with a upper case O, not dayLocate = dayofweek.indexof(" "). Be careful because javascript is case sensitive.

To use the innerHTML() element property you need to get a reference to this element before with document.getElementById("id");

var displayCountDown = document.getElementById('displayCountDown');
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>";

onload must be in lower case; <body onLoad = "scrollColor(); countDown(); copyRight()">

I used this code and it seems to work although I don't know if this is the final result you want.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>Chapter 9-1 Midwest Bridal Expo</title>
<script type="text/javascript">
<!--Hide from old browsers -->
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("2015")
    year = dayofweek.substr(yearLocate, 4)
    alert("This webpage was constructed by jaj033")


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

    var displayCountDown = document.getElementById('displayCountDown');
    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
    var lastModDate = lastModDate.substring(0,10)
    displayCopyRight.innerHTML = "<p style='font-size:8pt; font-weight:bold;'>The URL of this document is "+document.URL+"<br/>Midwest Bridal Expo"+"<br/>This document was last modified "+lastModDate+"</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" border="1">
  <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>

Collectives™ on Stack Overflow

HTML How do I display a timer using javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related