I can not get this function displayDate to work on on a particular HTML page that has another JavaScript function countChars on it. I have 3 other HTML pages with only the displayDate function and they all work fine. Just this reservations page with both functions displayDate and countChars on it does not work. I have already tried all different positions of the <script> tags in the header and at the end of the body.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Reservations </title>
<link rel="stylesheet" href="../css/atlantic.css" type="text/css" />
<link rel="icon" href="../images/favicon.ico" type="image/x-icon" />
<script src = "../scripts/atlanticJS.js" type="text/javascript"></script>
</head>
<body>
<div id = "wrapper">
<header>
<h1>Atlantic Trails Resort</h1>
</header>
<nav>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "accommodations.html">Accommodations</a></li>
<li><a href = "activities.html">Activities</a></li>
<li><a href = "reservations.html">Reservations</a></li>
</ul>
<div id = "contact">
<span class = "resort">Atlantic Trails Resort<br>
1210 Atlantic Trails Way<br>
Cliffside, Maine 04226</span><br><br>
<a href = "tel:888-555-5555" id="telephone">888-555-5555</a>
<a href = "index.html">www.atlantictrails.com</a>
</div>
</nav>
<div id = "main-image">
</div>
<main>
<h2>Reservations for Atlantic Trails Resort</h2>
<h3>Contact Us Today to Make Your Reservations!</h3>
<p>Required fields are marked with an asterisk *</p>
<form method = "post" action = "">
<fieldset>
<ul>
<li>
<label for = "first_name">*First Name:</label>  
<input type = "text" id = "first_name" name = "first_name" size = "20" class = "large" required = "required" autofocus />
</li>
<li>
<label for = "last_name">*Last Name:</label>  
<input type = "text" id = "last_name" name = "last_name" size = "20" class = "large" required = "required" />
</li>
<li>
<label for = "email">*E-mail:</label>  
<input type = "temail" id = "email" name = "email" size = "25" class = "large" required = "required" />
</li>
<li>
<label for = "phone">Phone:</label>  
<input type = "phone" id = "phone" name = "phone" size = "20" class = "large" />
</li>
<li>
<label for = "date">Date:</label>  
<input type = "date" id = "date" name = "date" size = "15" class = "large" />
</li>
<li>
<label for = "time">Time:</label>  
<input type = "time" id = "time" name = "time" size = "10" class = "large" />
</li>
<li>
<label for = "num_guests">Number of Guests:</label>  
<input type = "number" id = "num_guests" name = "num_guests" size = "2" class = "large" />
</li>
<li>
<label for = "comments">*Comments: </label>  
<textarea id = "comments" name = "comments" rows = "2" cols = "27" maxlength = "64" class = "large" required = "required"
onkeyup = "countChars('comments', 'charcount');" onkeydown = "countChars('comments', 'charcount');" onmouseout = "countChars('comments', 'charcount');"></textarea>
<br>
<span id = "charcount"> of 64 characters left</span>
</li>
</ul>
</fieldset>
<fieldset>
<input type = "submit" class = "submit_info" value = "Submit" />
</fieldset>
</form>
</main>
<footer>
Copyright © 2018 Atlantic Trails Resort<br>
<a href = "#[email protected]">[email protected]</a><br>
Today is: <span id = "date"></span>
</footer>
</div>
<script>displayDate();</script>
</body>
</html>
JavaScript:
//Display date function
function displayDate(){
document.getElementById("date").innerHTML = new Date();
}
//Character counting function / countfrom = source element / displayto = destination element
function countChars(countfrom, displayto){
//Get length of characters in source element
var len = document.getElementById(countfrom).value.length;
//Set source element length to destination element
document.getElementById(displayto).innerHTML = 64 - len + ' of 64 characters left';
//If charcount is 64 make text red and bold, else text is green and not bold
if(len == 64){
document.getElementById(displayto).style.color = "red";
document.getElementById(displayto).style.fontWeight = "bold";
}
else{
document.getElementById(displayto).style.color = "green";
document.getElementById(displayto).style.fontWeight = "normal";
}
}
