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> &nbsp &nbsp;
                        <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> &nbsp &nbsp;
                        <input type = "text" id = "last_name" name = "last_name" size = "20" class = "large" required = "required" />
                    </li>
                    <li>
                        <label for = "email">*E-mail:</label> &nbsp &nbsp;
                        <input type = "temail" id = "email" name = "email" size = "25" class = "large" required = "required" />
                    </li>
                    <li>
                        <label for = "phone">Phone:</label> &nbsp &nbsp;
                        <input type = "phone" id = "phone" name = "phone" size = "20" class = "large" />
                    </li>
                    <li>
                        <label for = "date">Date:</label> &nbsp &nbsp;
                        <input type = "date" id = "date" name = "date" size = "15" class = "large" />
                    </li>
                    <li>
                        <label for = "time">Time:</label> &nbsp &nbsp;
                        <input type = "time" id = "time" name = "time" size = "10" class = "large" />
                    </li>
                    <li>
                        <label for = "num_guests">Number of Guests:</label> &nbsp &nbsp;
                        <input type = "number" id = "num_guests" name = "num_guests" size = "2" class = "large" />
                    </li>
                    <li>
                        <label for = "comments">*Comments:  </label> &nbsp &nbsp;
                        <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 &copy; 2018 Atlantic Trails Resort<br>
        <a href = "#bobert@bobert.com">bobert@bobert.com</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";
    }
}

```