Question

I have a script that creates a bar at the top right of the browser with current date and time. I’m trying to update it every thirty seconds so that it keeps a live time, and not just the time when the page loaded. You’ll see that I create the time bar with the set_time() function onload, and then create a setInterval that is intended to call timer() which in turn updates the time by calling the set_time() function again. The timer is clearly firing because every 4 seconds I get an alert box with “hi” (from the timer() function), but then when it’s supposed to call set_time() after this it isn’t working. I should be getting an alert with “set time” (located at the end of the set_time() function) each time the timer is fired as well, which I do not. Can anybody help?

window.onload = function(){
    set_time();
    window.setInterval(timer, 4000);
};

function timer(){
    alert('hi');
    set_time();
}

function set_time(){

    //create date object to manipulate
    var d = new Date();

    //current day of the week
    var d_names= new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
    curr_day = d.getDay();


    //current date
    var m_names = new Array("January", "February", "March", 
    "April", "May", "June", "July", "August", "September", 
    "October", "November", "December");

    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    var curr_year = d.getFullYear();

    //current Time
    var a_p = "";

    var curr_hour = d.getHours();
    if (curr_hour < 12)
       {
       a_p = "a.m.";
       }
    else
       {
       a_p = "p.m.";
       }
    if (curr_hour == 0)
       {
       curr_hour = 12;
       }
    if (curr_hour > 12)
       {
       curr_hour = curr_hour - 12;
       }

    var curr_min = d.getMinutes();
    curr_min = curr_min + "";

    if (curr_min.length == 1)
       {
       curr_min = "0" + curr_min;
       }

    element = document.getElementById('dateTime');
    if(element){
    //if dateDiv already exists, update contents
    dateDiv.innerHTML = '';
    dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
}
else{
    //else create new dateDiv and append it to DOM body
    var dateDiv = document.createElement('div');
    dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
        dateDiv.id = 'dateTime';
        document.body.appendChild(dateDiv);
    }

    alert('set time');

    //setTimeout("set_time()", 3000);


}

Answer 1

You are assigning the #dateTime div to the element variable and even check for it’s existance, but when you have confirmed that element exists you use a dateDiv variable. That one is undefined and throws an exception on setting its innerHTML property; you should be able to see that in your browser’s error console.

Use this code instead:

var element = document.getElementById('dateTime');
if (!element) {
    element = document.createElement('div');
    document.body.appendChild(element);
}
element.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';