CODEWITHSUNDEEP
javascripthtml
user8776656
user8776656

Reputation: 103

Time and Date running on page

Having issue with onload event, its not starting the Javascript on page.

I have tried using following code: onload="startTime()" and document.getElementById("clockdate").onload = function() {startTime()};

function startTime() {
  var today = new Date();
  var hr = today.getHours();
  var min = today.getMinutes();
  var sec = today.getSeconds();
  ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
  hr = (hr == 0) ? 12 : hr;
  hr = (hr > 12) ? hr - 12 : hr;
  //Add a zero in front of numbers<10
  hr = checkTime(hr);
  min = checkTime(min);
  sec = checkTime(sec);
  document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  var curWeekDay = days[today.getDay()];
  var curDay = today.getDate();
  var curMonth = months[today.getMonth()];
  var curYear = today.getFullYear();
  var date = curWeekDay + ", " + curMonth + " " + curDay + " " + curYear;
  document.getElementById("date").innerHTML = date;

  var time = setTimeout(function() {
    startTime()
  }, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}
<div id="clockdate" onload="startTime()">
  <div id="clock"></div>
  <div id="date"></div>
</div>

Trying to show the current time and date.

Upvotes: 0

Views: 221

Answers (4)

User863
User863

Reputation: 20039

onload doesnt works with div. Try

document.body.onload = startTime;

Shorter version

function startTime() {
  var today = new Date();
  
  document.getElementById('date').innerHTML = today.toLocaleDateString('en-US', {
    weekday: 'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
  
  document.getElementById('clock').innerHTML = today.toLocaleTimeString('en-US')

  var time = setTimeout(startTime, 1000);
}

document.body.onload = startTime;
<div id="clockdate">
  <div id="clock"></div>
  <div id="date"></div>
</div>

Upvotes: 1

RISHIKESH PAL
RISHIKESH PAL

Reputation: 236

function startTime() {
        var today = new Date();
        var hr = today.getHours();
        var min = today.getMinutes();
        var sec = today.getSeconds();
        ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
        hr = (hr == 0) ? 12 : hr;
        hr = (hr > 12) ? hr - 12 : hr;
        //Add a zero in front of numbers<10
        hr = checkTime(hr);
        min = checkTime(min);
        sec = checkTime(sec);
        document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;

        var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        var curWeekDay = days[today.getDay()];
        var curDay = today.getDate();
        var curMonth = months[today.getMonth()];
        var curYear = today.getFullYear();
        var date = curWeekDay + ", " + curMonth + " " + curDay + " " + curYear;
        document.getElementById("date").innerHTML = date;

        var time = setTimeout(function() {
            startTime()
        }, 500);
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
<body onload="startTime()">
    <div id="clockdate">
        <div id="clock"></div>
        <div id="date"></div>
    </div>
</body>

You have done everything right (just you have to start the function of body <body onload="startTime()">

Upvotes: 0

Dhanushka sasanka
Dhanushka sasanka

Reputation: 528

Your data Function is ok slightly. but calling point of functions is wrong try to do what i did.

function startTime() {
  var today = new Date();
  var hr = today.getHours();
  var min = today.getMinutes();
  var sec = today.getSeconds();
  ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
  hr = (hr == 0) ? 12 : hr;
  hr = (hr > 12) ? hr - 12 : hr;
  //Add a zero in front of numbers<10
  hr = checkTime(hr);
  min = checkTime(min);
  sec = checkTime(sec);
  document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  var curWeekDay = days[today.getDay()];
  var curDay = today.getDate();
  var curMonth = months[today.getMonth()];
  var curYear = today.getFullYear();
  var date = curWeekDay + ", " + curMonth + " " + curDay + " " + curYear;
  document.getElementById("date").innerHTML = date;

  var time = setTimeout(function() {
    startTime()
  }, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}
<html>
<head></head>
<body onload="startTime()">

<div id="clockdate">
  <div id="clock"></div>
  <div id="date"></div>
</div>

</body>
</html>

Upvotes: 0

Dinu
Dinu

Reputation: 1524

onload does not run on div elements: https://www.w3schools.com/jsref/event_onload.asp You need to set it on <body>

Then, once you get it running, do mind the quality of your code: from a helicopter view, I see a globalscope ap variable; also, there is no reason to create an endless chain of closures by recursively calling setTimeout; you can achieve the same effect with an external setInterval call... If you use setTimeout, at least get rid of the useless closure and call setTimeout(startTime,500) directly.

Upvotes: 1

Related Questions