Automatically Update Copyright Year Using JavaScript

Use JavaScript to create a copyright year that automatically updates.
Javascript graphic

Table of Contents

Required HTML Elements

To create an auto-updating copyright year, you will need the following web page elements:

Add HTML Elements

Create a paragraph element in your footer.

				
					<p></p>
				
			

Add an empty SPAN element inside the paragraph.  Then, give it a unique ID or CLASS.  JavaScript will use this unique ID to populate the current year.

				
					<p><span id="copyright-year"></span></p>
				
			
Add a copyright symbol and a space between the opening paragraph tag and the opening SPAN tag.
				
					<p>&copy; <span id="copyright-year"></span></p>
				
			

Add your remaining copyright text between the closing SPAN tag and the closing paragraph tag.

				
					<p>&copy; <span id="copyright-year"></span>DesignDev.  All Rights Reserved.</p>
				
			

Add JavaScript Code

Add SCRIPT tags immediately before your web page’s closing BODY tag.

				
					<html>
<body>
    <script></script>
</body>
</html>
				
			

Type the following code between the SCRIPT tags.

				
					<html>
<body>
    <script>
        document.getElementById("copyright-year").innerHTML = new Date().getFullYear();
    </script>
</body>
</html>
				
			

Document.getElementById is an HTML document object model (DOM) method that accesses an HTML element with the specified ID.

InnerHTML accesses the value of the element.

The equals symbol and the JavaScript statement Date().getFullYear() set the value of the “copyright-year” SPAN equal to  the current date.  The getFullYear() part of the statement formats the date as a four-digit year.

CodePen Solution

The CodePen solution is below.  You can also view it on the CodePen website.

Subscribe
Notify of

0 Comments
Inline Feedbacks
View all comments