Date display with javascript

Question

my instructions are to Include a function defined via a function expression that displays the current date and time in an h2 at the top of the page when the page is opened. Add an id=”dateDisplay” to the h2. Include a self-invoking function that changes the color of the date text that was printed by the first function.

Im a bit confused on how to accomplish this. I tried to do a function expression to display the date but i get nothing shown and no errors. I tried to do a body onload to call the function but that result in a console error of function not defined.

HTML

<div>
    <h2 id="dateDisplay"></h2>
</div>

Javascript

var d = new Date();
var x = function dateDisplay(){
    document.getElementById("dateDisplay").value = d;
}

I'm really confused by the instructions. What exactly am I suppose to do to get this in working order.

edited: I had an error with my link to my js file. The issue now is I get console error document.getElementById... is null weather i use innerHTML or value or .innerText

Spencer Wieczorek · Accepted Answer · 2015-09-16 01:42:29Z

2

You need to call your function, and use .innerText and not .value. Note value is only for input elements.

var d = new Date();
var x = function dateDisplay(){
    document.getElementById("dateDisplay").innerText = d;
}

x();

answered Sep 16, 2015 at 1:42

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kronis72 Over a year ago

why does this work in jsfiddle, but not when i upload to my server? or do a preview view in komodo IDE?

Spencer Wieczorek Over a year ago

@kronis72 Make sure you are running the JavaScript after the dateDisplay element is loaded.

kronis72 Over a year ago

I had an issue with my link to my js file, but your code example i get a console error that states document.getelementbyid is null

Spencer Wieczorek Over a year ago

@kronis72 Then it's because your JavaScript is being ran before the element is being loaded. You can prevent that by placing the code inside window.onload = function(){ ... }. JSFiddle does that automatically by default. For example.

floor · Accepted Answer · 2015-09-16 01:45:28Z

1

You can also use the .innerHTML method like so:

var d = new Date();
var x = function dateDisplay(){
    document.getElementById("dateDisplay").innerHTML = d;
}
x();

You also forgot to call the function x

answered Sep 16, 2015 at 1:45

floor

1,57212 silver badges25 bronze badges

Comments

zheek · Accepted Answer · 2015-09-17 05:09:26Z

1

you must use this code :
Javascript:

var d = new Date();
var x = function dateDisplay(){
document.getElementById("dateDisplay").innerHTML = d;
}
x();

To "display data" in HTML, (in most cases) you will set the value of an innerHTML property.after this change you must call x() function .
and you hava to use this after dateDisplay element loaded.

edited Sep 17, 2015 at 5:09

answered Sep 16, 2015 at 1:42

zheek

7521 gold badge11 silver badges22 bronze badges

1 Comment

kronis72 Over a year ago

while this works in jsfiddle this does not work when on my server.

Jack jdeoel · Accepted Answer · 2015-09-16 02:12:07Z

0

call function directly more prefer than assign to variable function

var d = new Date();
dateDisplay();
function dateDisplay(){
   document.getElementById("dateDisplay").innerHTML = d;
}

answered Sep 16, 2015 at 2:12

Jack jdeoel

4,5886 gold badges28 silver badges57 bronze badges

Collectives™ on Stack Overflow

Date display with javascript

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related