CODEWITHSUNDEEP
javascripthtmlcssdate
chakolatemilk
chakolatemilk

Reputation: 883

Javascript date and HTML

I'm very new to Javascript. I'm not exactly sure how to call it or use it. And some websites aren't that much of a help. So I thought you guys would be a great help.

I have this so far:

<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="refresh" CONTENT="2">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Current Time</title>
</head>
<body>
    <div class="navBar">
        <a class="nav" href="http://www.blah.com">blah</a>
        <a class="nav" href="http://www.blah2.com">blah2</a>
        <a class="nav" href="https://www.blah3.com">blah3</a>
        <script type="text/javascript">
            function getBostonDate(){
                var currentDate = new Date();
                var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMiutes() + ":" + currentDate.getSeconds();
                document.write(dateTime);
            }
        </script>
    </div>
</body>
</html>

As you can see, I want it to just display a couple of links in the header, and then display the date. (I am in Boston according to my profile so I used that.)

I also tried to put it in it's own .js file and calling it externally and placing that line of code in the part of the HTML. But even then, I have no idea how to call it in the place I want it to be called (after the links). Please help?

Thanks in advance!

Upvotes: 1

Views: 3287

Answers (6)

nicks91
nicks91

Reputation: 85

Can try this as well. It will auto reflect the system timezone. Add it where ever you want.

<div id="time"></div>
<script>
    function getCurrentTime() {
    var d = new Date();
    document.getElementById("time").innerHTML = d;
    }
    setInterval('getCurrentTime()', 1000);
</script>

Upvotes: 0

DanielX2010
DanielX2010

Reputation: 1908

Add a div to your code where you want to display the time, such as 

<div id="display_time"></div>

and then, instead of document.write... use:

document.getElementById("display_time").innerHTML=dateTime;

If you want your time to be updated constantly, use setInterval, as in:

setInterval( 
    // YOUR FUNCTION HERE
,1000);

That will recalculate the time and redisplay it every 1000 ms (=1s).

EDIT: As mentioned by Jon P, you have to call the function (and not only define it). A way to do it is to call it once the page body has loaded. All you have to do is adding it to your body tag as in:

<body onload="setInterval(getBostonDate(),1000);">

Alternatively, you can just call it inside your script, as in

setInterval(getBostonDate(),1000);

Also, as mentioned by Samurai, don't forget to correct your typo: getMinutes() instead of getMiutes()

Upvotes: 6

PostureOfLearning
PostureOfLearning

Reputation: 3541

Try something like this:

<body onload="getBostonDate()">
    <div class="navBar">
        <a class="nav" href="http://www.blah.com">blah</a>
        <a class="nav" href="http://www.blah2.com">blah2</a>
        <a class="nav" href="https://www.blah3.com">blah3</a>
    <span id="myBostonTimeSpan"></span>
    </div>
        <script type="text/javascript">

            function getBostonDate(){
                var currentDate = new Date();
                var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
                document.getElementById("myBostonTimeSpan").innerHTML=dateTime;
            }

        </script>
</body>

Once you've learned some javascript, you might also want to have a look at jQuery

Upvotes: 0

Jon P
Jon P

Reputation: 19772

Your main problem is that you have set the function but you don't call it anywhere. Your simplest solution would be to make the script naked, i.e Take it out of the function.

<div class="navBar">
        <a class="nav" href="http://www.blah.com">blah</a>
        <a class="nav" href="http://www.blah2.com">blah2</a>
        <a class="nav" href="https://www.blah3.com">blah3</a>
        <script type="text/javascript">

                var currentDate = new Date();
                var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMiutes() + ":" + currentDate.getSeconds();
                document.write(dateTime);

        </script>
    </div>

See this example: http://jsfiddle.net/LpMeR/

This will fix your problem but is not the best way to do it.

Upvotes: 0

frenchie
frenchie

Reputation: 51927

Since you're new to javascript, I think it would be a good idea to start learning jQuery instead of going with native javascript. Here's the jQuery way of doing it:

$(document).ready(function () {
    setInterval(ShowTime, 1000);
});

function ShowTime() {

    var TheDate = new Date();

    var TheHour = TheDate.getHours();
    var TheMinutes = TheDate.getMinutes();
    var TheSeconds = TheDate.getSeconds();

    TheSeconds = (TheSeconds < 10) ? "0" + TheSeconds :  TheSeconds;

    var TheTime = "Boston current time: " + TheHour + ":" +TheMinutes + ":" + TheSeconds;

    $('#TheDate').html(TheTime);     
}

And here's the jsFiddle

Upvotes: 2

Ahmed Alaa El-Din
Ahmed Alaa El-Din

Reputation: 1833

Use this in case you want to load this javascript on link click:

<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="refresh" CONTENT="2">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Current Time</title>
</head>
<body>
    <div class="navBar">
        <a class="nav" onclick="getBostonDate()" href="http://www.blah.com">blah</a>
        <a class="nav" onclick="getBostonDate()" href="http://www.blah2.com">blah2</a>
        <a class="nav" onclick="getBostonDate()" href="https://www.blah3.com">blah3</a>
        <script type="text/javascript">
            function getBostonDate(){
                var currentDate = new Date();
                var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMiutes() + ":" + currentDate.getSeconds();
                document.write(dateTime);
            }
        </script>
    </div>
</body>
</html>

In case you want it to load on form load Use this:

<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="refresh" CONTENT="2">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Current Time</title>
</head>
<body onload="getBostonDate()">
    <div class="navBar">
        <a class="nav" href="http://www.blah.com">blah</a>
        <a class="nav" href="http://www.blah2.com">blah2</a>
        <a class="nav" href="https://www.blah3.com">blah3</a>
        <script type="text/javascript">
            function getBostonDate(){
                var currentDate = new Date();
                var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMiutes() + ":" + currentDate.getSeconds();
                document.write(dateTime);
            }
        </script>
    </div>
</body>
</html>

Upvotes: 0

Related Questions