Getting Date Javascript + HTML

Question

So I'm trying to get my date displayed in my innerhtml but problem is I cant find out as to why its not spacing out or displaying like this

My code JS code is

   function myFunction() {

  // day of the month, day of the week month and year
  var p = document.getElementById("mydata");
  var mydate = new Date();
  var day = mydate.getDay();
  var month = mydate.getMonth();
  var year = mydate.getYear();
  var d = mydate.getDate();
  var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

  p.innerHTML = "Today is the " + d + dayNames[day] + month + year;


}

and html is

   <!DOCTYPE html>
<html lang="en">
<head>
  <!-- link to external JS file.  Note that <script> has an
  end </script> tag -->
  <meta charset="utf-8">
  <title> Task 5 </title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script src="task5.js" type="text/javascript"></script>
</head>
<body>
  <!-- Create a paragraph with id mydata -->
  <div id="box">
  <p id="mydata"> Todays Date</p>
  <p> <button  onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>

You need to add spaces to the string concatenation: "Today is the " + d + " (" + daynames[day] + ") " etc etc — Jared Smith
– Jared Smith, Commented Oct 22, 2018 at 17:36
"Today is the " + d + dayNames[day] + month + year; <--- look at what you are doing.... I see no spaces — epascarello
– epascarello, Commented Oct 22, 2018 at 17:42

Farinaz · Accepted Answer · 2018-10-22 18:09:58Z

3

you should add number to month and year, like this:

function myFunction() {

    var p = document.getElementById("mydata");
    var mydate = new Date();
    var day = mydate.getDay();
    var month = mydate.getMonth() + 1;
    var year = mydate.getYear() + 1900;
    var d = mydate.getDate();
    var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    p.innerHTML = "Today is " + d + "(" + dayNames[day] + ")" + month + " " + year;
}

answered Oct 22, 2018 at 18:09

Farinaz

3751 gold badge3 silver badges10 bronze badges

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

Comments

Andrew Springman · Accepted Answer · 2018-10-22 17:41:40Z

1

Your code has two issues.

The year is relative to 1900, so you need to add that in.

var year = mydate.getYear() + 1900;
You need to explicitly add the spaces and the parentheses.

p.innerHTML = "Today is " + d + " (" + dayNames[day] + ") " + month + " " + year;

answered Oct 22, 2018 at 17:41

Andrew Springman

631 silver badge10 bronze badges

Comments

ahlie94 · Accepted Answer · 2018-10-22 17:55:21Z

1

Solved it, thanks guys.

function myFunction() {

  // day of the month, day of the week month and year
  var p = document.getElementById("mydata");
  var mydate = new Date();
  var day = mydate.getDay();
  var month = mydate.getMonth();
  var year = mydate.getYear() + 1900;
  var d = mydate.getDate();
  var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  var months = ["Jan", "Feb", "Mar", "April", "May", "June", "July", "August", "September", "Oct"];

  p.innerHTML = "Today is the " + d + " " + "("+ dayNames[day]+")" + " " + months[month] + " " + year;
  " (" + months[month] + ")"


}

answered Oct 22, 2018 at 17:55

ahlie94

1711 silver badge11 bronze badges

Comments

JRoss · Accepted Answer · 2018-10-22 17:56:24Z

1

Use getFullYear for the year, get the correct month names and correctly build the date string.

function myFunction() {

  // day of the month, day of the week month and year
  var p = document.getElementById("mydata");
  var mydate = new Date();
  var day = mydate.getDay();
  var month = mydate.getMonth();
  var year = mydate.getFullYear();
  var d = mydate.getDate();
  var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var monthShortNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

  p.innerHTML = "Today is the " + d + " (" + dayNames[day] + ") " + monthShortNames[month] + " " + year;
  
}

<!-- Create a paragraph with id mydata -->
<div id="box">
  <p id="mydata"> Todays Date</p>
  <p> <button onclick="myFunction();"> Click </button></p>
</div>

edited Oct 22, 2018 at 17:56

answered Oct 22, 2018 at 17:53

JRoss

1,39511 silver badges19 bronze badges

2 Comments

Arleigh Hix Over a year ago

Also needs an array of month names just like dayNames

JRoss Over a year ago

Added month names. Thanks.

Collectives™ on Stack Overflow

Getting Date Javascript + HTML

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related