How to performing clock with timing event in JS and HTML

Question

I set up a clock with timing event and want to show in the html file. I have 2 files which are js and html file. js is to configure the clock with timing event and the html file is to show the timing.

My code is found below.
clock.html:

<html>
<head>
<title>Clock with a timing event</title>
<script src="clock.js"></script>
<script type="text/javascript" src="/Cesium-1.34/ThirdParty/jquery-1.11.3.min.js"></script>
</head>
<body>
<h1 id="txt"></h1>
</body>
</html>

js:

    $(function () {
        function startTime() {
            var today = new Date();
            var h = today.getHours();
            var min = today.getMinutes();
            var s = today.getSeconds();
            var y = today.getFullYear();
            var mon = today.getMonth()+1;
            var d = today.getDate();
            min = checkTime(min);
            s = checkTime(s);
            mon = checkTime(mon);
            d = checkTime(d);
            document.getElementById('todaytime').innerHTML = " "+ d + "/" + mon + "/" +y + "  " + h + ":" + min + ":" + s + " SGT ";
            var t = setTimeout(startTime, 500);
        }
        function checkTime(i) {
            if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
            return i;
        }
 });

The error states:

"Uncaught ReferenceError: $ is not defined"

My question is how to get the values from the js and show in the html file.

The `$ is undefined` error means you need to include jquery.js in the page — Rory McCrossan, Sep 08 '17 at 08:19
Darn it how stupid I am. Sigh.... I have been struggling this for hours — , Sep 08 '17 at 08:25

score 0 · Accepted Answer · edited Sep 11 '17 at 09:28

0

There are three problems with your current code:

first one is that you never call the startTime() function anywhere therefore it never starts
second one is that you are targeting an element with ID of todaytime while your HTML has an element with ID of txt
third problem is the fact that your function is wrapped by a non-existent function (jQuery) so just remove the opening $(function () { and the last }

Here is the corrected code: JSFIDDLE DEMO

edited Sep 11 '17 at 09:28

honk

7,217
11
62
65

answered Sep 08 '17 at 08:28

Matt Newelski

311
1
8

thank for correcting my code, if i want to use jquery, then how to do it??? – Sep 08 '17 at 08:42
If you want to use jQuery then disregard the last issue I described and ensure you are including jQuery .js file within your page (i.e. using a ` – Matt Newelski Sep 08 '17 at 08:47
is the order in the two script necessary???? – Sep 08 '17 at 08:55
Yes, jQuery needs to be included before you start using jQuery – Matt Newelski Sep 08 '17 at 09:01

How to performing clock with timing event in JS and HTML

1 Answers1