Javascript Clock not showing up

Question

So I have a HTML website (not actually online) and I'm just messing around with it. Recently I added a clock, however, after doing a lot of editing with it, there seems to be an error that I can't find. Here is the code:

<!DOCTYPE html>
<html>
<script type="text/javascript">
<!--
function updateTime() { var monthNames = ["January", "February", "March", "April", "May", "June
function updateTime() {
var currentTime = new Date();
var dayWk = currentTime.getDay();
var year = currentTime.getYear() - 100 + 2000;
var month = monthNames[currentTime.getMonth()];
var date = currentTime.getDate();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var dayWkNm = " ";
var dateFuncVar = date;
var dateSuffix = " ";
if (minutes < 10){
    minutes = "0" + minutes;
}
if (seconds < 10){
    seconds = "0" + seconds;
}
if (dayWk == 0){
    dayWkNm = "Sunday";
}
if (dayWk == 1){
    dayWkNm = "Monday";
}
if (dayWk == 2){
    dayWkNm = "Tuesday";
}
if (dayWk == 3){
    dayWkNm = "Wednesday";
}
if (dayWk == 4){
    dayWkNm = "Thursday";
}
if (dayWk == 5){
    dayWkNm = "Friday";
}
if (dayWk == 6){
    dayWkNm = "Saturday";
}
function dateFunc(dateFuncVar) {
    while (dateFuncVar > 9) {
        dateFuncVar = dateFuncVar - 10;
    }

    if (dateFuncVar == 1){
        dateSuffix = "st";
    } else if (dateFuncVar == 2){
        dateSuffix = "nd";
    } else if (dateFuncVar == 3){
        dateSuffix = "rd";
    } else {
        dateSuffix = "th";
    }
    return dateFuncVar;
}
var text = dayWkNm + "the" + date + " of " + month + ", " + year + " " + hours + ":" + minutes + ":" + seconds;
if(hours > 11){
    text+=" PM";
    hours = hours - 12;
} else {
    text+=" AM";
}

document.getElementById("time").innerHTML=text;
}

setInterval(updateTime, 1000);
//-->
</script>
<head>
<title>
Welcome to the Goto home page
</title>
<h3>
<p style="text-align:right" id="time">
</p>
</h3>
</head>

Have you checked your browsers console for the error reports? — NewToJS, Aug 31 '15 at 16:12
I am not using a browser, but rather an app on my iPad to type up the code. It doesn't submit error reports — pokemonPasta, Aug 31 '15 at 16:13
Typos in your else ifs. `elseif ` should be `else if`. Also, where do you define the function `getMonthName`? — j08691, Aug 31 '15 at 16:13
getMonthName I confused with [MIT App Inventor](http://appinventor.mit.edu). I'll change the else ifs. — pokemonPasta, Aug 31 '15 at 16:17

score 0 · Answer 1 · answered Aug 31 '15 at 16:16

0

Look at where you are returning "dateFuncVar". I am willing to bet the rest of your code is not getting executed.

answered Aug 31 '15 at 16:16

Patrick

711
6
8

score 0 · Accepted Answer · edited May 23 '17 at 12:22

http://plnkr.co/edit/PtlbPQQHT3wIzDIafaN7?p=preview

There were a few errors:

It should be "else if" not "elseif"
You were returning dateFuncVar too soon
getMonthName is not a function, so I replaced it with the answer from Get month name from Date (go upvote that question and answer, too, if you accept this answer)

Not an error, but I would use setInterval instead of redoing a setTimeout inside the function.

function updateTime() { var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];

    var currentTime = new Date();
    var dayWk = currentTime.getDay();
    var year = currentTime.getYear() - 100 + 2000;
    var month = monthNames[currentTime.getMonth()];
    var date = currentTime.getDate();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var dayWkNm = " ";
    var dateFuncVar = date;
    var dateSuffix = " ";
    if (minutes < 10){
        minutes = "0" + minutes;
    }
    if (seconds < 10){
        seconds = "0" + seconds;
    }
    if (dayWk == 0){
        dayWkNm = "Sunday";
    }
    if (dayWk == 1){
        dayWkNm = "Monday";
    }
    if (dayWk == 2){
        dayWkNm = "Tuesday";
    }
    if (dayWk == 3){
        dayWkNm = "Wednesday";
    }
    if (dayWk == 4){
        dayWkNm = "Thursday";
    }
    if (dayWk == 5){
        dayWkNm = "Friday";
    }
    if (dayWk == 6){
        dayWkNm = "Saturday";
    }
    function dateFunc(dateFuncVar) {
        while (dateFuncVar > 9) {
            dateFuncVar = dateFuncVar - 10;
        }

        if (dateFuncVar == 1){
            dateSuffix = "st";
        } else if (dateFuncVar == 2){
            dateSuffix = "nd";
        } else if (dateFuncVar == 3){
            dateSuffix = "rd";
        } else {
            dateSuffix = "th";
        }
        return dateFuncVar;
    }
    var text = dayWkNm + "the" + date + " of " + month + ", " + year + " " + hours + ":" + minutes + ":" + seconds;
    if(hours > 11){
        text+=" PM";
        hours = hours - 12;
    } else {
        text+=" AM";
    }

    document.getElementById("time").innerHTML=text;
}

setInterval(updateTime, 1000);

Lol then why did you accept this as the correct answer? Anyways, you're sure you have a div/span/etc.. with the id of "time"? This exact code works in the plnkr. — Timothy, Aug 31 '15 at 16:32
I changed the post so now it has the html up to the point where the clock is used — pokemonPasta, Aug 31 '15 at 16:38
You're just missing monthNames. It got cut off from the "code" and I gave up trying to format it in my answer lol. Add this to the very beginning of your function: var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; — Timothy, Aug 31 '15 at 16:49
No problem! What app are you using on your iPad? Just out of curiosity. — Timothy, Aug 31 '15 at 17:00
Code Master. It's not the best, but it does support a good amount of codes — pokemonPasta, Aug 31 '15 at 17:02

Javascript Clock not showing up

2 Answers2