How to pass value of date variable from javascript to html

Question

I want to print the value of the date by passing it from the JavaScript file to the HTML file.

HTML file:

  <html> 
      <body> 
          <script src=background.js> </script> 
          <span id="showDate"> </span> 
      </body> 
  </html>

JavaScript file:

document.body.style.background = "url('1.jpg')";
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
  dd='0'+dd
} 
if(mm<10) {
  mm='0'+mm
} 
today = dd+'/'+mm+'/'+yyyy;
alert(today);
document.getElementById("showDate").value=today;

possible duplicate of [How do I display a date/time in the user's locale format and time offset?](http://stackoverflow.com/questions/85116/how-do-i-display-a-date-time-in-the-users-locale-format-and-time-offset) — MaxZoom, Aug 27 '15 at 17:45
use `textContent ` or `innerHTML` instead of `value` in last line of your code — J Santosh, Aug 27 '15 at 17:54

Oskar Eriksson · Answer 1 · 2015-08-27T17:48:04.493

0

Easiest way:

 document.getElementById("showDate").textContent = today;

edited Aug 27 '15 at 17:48

answered Aug 27 '15 at 17:42

Oskar Eriksson

2,591
18
32

While this may answer the question, a little comment on how the code works might be able to help the OP even more. – Hanlet Escaño Aug 27 '15 at 18:02

score 0 · Answer 2 · answered Aug 27 '15 at 17:43

You just need to use textContent instead of value.

Live Working Demo:

document.body.style.background = "url('1.jpg')";
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
    dd = '0' + dd
}
if (mm < 10) {
    mm = '0' + mm
}
today = dd + '/' + mm + '/' + yyyy;
document.getElementById("showDate").textContent = today;

<span id="showDate"> </span>

JSFiddle Version: https://jsfiddle.net/ae6wfz12/

Thanks. But, I'm working on a chrome extension and still not working with me. — Deep Kakkad, Aug 27 '15 at 17:52

score 0 · Accepted Answer · answered Aug 27 '15 at 17:55

0

First of all link up your javascript file like into HTML file bottom part.

<script src="your_javascript_file.js"></script>

and then

Write Your js code into your js file with flowing line and pass inner html into

document.getElementById("showDate").innerHTML = today;

answered Aug 27 '15 at 17:55

Jakir Hossain

2,457
18
23

1

Worked when I linked javascript file at bottom instead of top. Thanks! Can you explain? – Deep Kakkad Aug 27 '15 at 18:00
1

@DeepKakkad HTML is parsed from top to bottom, so if the script runs at the top, the element that it's trying to access won't exist yet. – Maximillian Laumeister Aug 28 '15 at 18:01
Now I get it. Thanks! @MaximillianLaumeister – Deep Kakkad Aug 30 '15 at 06:23

score 0 · Answer 4 · answered Aug 27 '15 at 17:56

First of all, you need to put the scripts that access document elements at the end of the body tag, so that they are executed only after the required elements are loaded.

 <html> 
      <body> 
          <span id="showDate"> </span> 
      </body> 
      <script src=background.js> </script>
  </html>

Secondly, as Maximillian told, use textConten or innerHTML or innerText property of the selected element to get or set the value.

document.getElementById("showDate").innerHTML = '<strong>' + today '</strong>';

How to pass value of date variable from javascript to html

4 Answers4