CODEWITHSUNDEEP
javascripthtml
ahlie94
ahlie94

Reputation: 171

Getting Date Javascript + HTML

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 Date image

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>

Upvotes: 1

Views: 254

Answers (4)

Farinaz
Farinaz

Reputation: 375

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;
}

Upvotes: 3

JRoss
JRoss

Reputation: 1395

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>

Upvotes: 1

ahlie94
ahlie94

Reputation: 171

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] + ")"


}

Upvotes: 1

Andrew Springman
Andrew Springman

Reputation: 63

Your code has two issues.

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

    var year = mydate.getYear() + 1900;

  2. You need to explicitly add the spaces and the parentheses.

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

Upvotes: 1

Related Questions