How can one create a dynamic copyright date without document.write() in JavaScript?

Question

How can one fetch and print the current year without using document.write() in JavaScript?

This is for a typical copyright line in the footer; e.g., © 2017 Stack Overflow.

Right now I'm using the standard document.write() method.

document.write(new Date().getFullYear());

Algolagnia

document.getElementById("someElementId").innerHTML = new Date().getFullYear();? (The date/copyright part of this is irrelevant, right? As in, you just need to be able to display any value that comes from JS?) – Nourishment

That set me on the right path. Thanks! – Algolagnia

What's wrong with using document.write (other than depending on the client to be set to the correct year)? – Murat

@Murat Lighthouse returned error: [Violation] Avoid using document.write(). because it adversely affects performance. – Rufena

Answer 1

Yes sure you can use an element:

<p>© Stack Overflow <span id="year"> </span></p>

Add a link to your JS like so:

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

And within this file you can do:

var date = new Date().getFullYear();

document.getElementById("year").innerHTML = date;

Alternatively you can simply use php like so:

<?php echo date("Y"); ?>

If you are using php just make sure you change the file ext to PHP.

Deduct

For beginners if you use PHP you need a PHP Server too :) – Deduct

Answer 2

document.getElementById("current-year").innerHTML = new Date().getFullYear();

<span id="current-year"></span>

Algolagnia

Very easy and approach, love it! – Townsman

Answer 3

with JavaScript:

Copyright &copy <script type="text/javascript"> document.write(new Date().getFullYear());</script> [companyName] Communications Inc. All rights reserved.

if you compile the above code somewhere like here , you would get an output as 2021 But for example, if you have a footer.vm file:

<div id="footerLinks" style="clear:left; text-align:left; color:#282828">
    Copyright &copy <script type="text/javascript"> document.write(new Date().getFullYear());</script> DigiVie Communications Inc. All rights reserved.
  </div>

and this one with the PHP:

&copy; <?php
  $fromYear = 2008;
  $thisYear = (int)date('Y');
  echo $fromYear . (($fromYear != $thisYear) ? '-' . $thisYear : '');?> CompanyName.

Interesting

Answer 4

The very simple solution above that was posted by user3731460 and edited by user663031 worked perfectly.

Higher in the thread on this page, one of the commenters asked "What's wrong with using document.write (other than depending on the client to be set to the correct year)?"

I dont know the reasoning back in 2017 (when the question was originally asked here), but now (in oct 2020), lighthouse extension for chrome gives the warning 'avoid document.write because it can delay page load by tens of seconds.' the way google encourages user experience, i can see that google may penalize the use of document.write at some point.

Achernar

The point of the comment was to get the OP to think about why document.write might be good or bad in this context. Not using it because "Google dev tools say not to use it" is not a logical argument. – Murat

Answer 5

If you want to have the year in multiple places, use a class instead:

const year = new Date().getFullYear();
document.querySelectorAll(".js-year").forEach(el => el.innerText = year);

<span class="js-year"></span>

Mirellamirelle