html - Vinculando a hoja de estilo externa y archivo javascript

Estoy intentando vincular mi página de inicio HTML a una hoja de estilo CSS externa y a un archivo de JavaScript (.js) externo. Por alguna razón, dependiendo del orden en que los liste en el archivo HTML, solo uno de ellos funciona. Usé una simple ventana de alerta en el archivo de JavaScript para probar si funciona y solo lo hace cuando el archivo de JavaScript está vinculado primero. Aquí está mi trabajo... (por cierto, también soy novato en HTML)

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8 /> 
<link rel="stylesheet" href="trinity.css" />
<Script src="churchJavaScript.js"></script>
<title>Trinity Temple</title>
</head>

<body>

<div id="CompleteWrapper">

    <header id="headerSection">
        <h1> Trinity Temple</h1>
        <h3> &nbsp;&nbsp;And I sent messengers unto them, saying, I am         doing a great work, so that I cannot come down:  </br>
        &nbsp;&nbsp;why should the work cease, whilst I leave it, and come     down to you?  Nehemiah 6:3 </h3> 
    </header> 

<nav id="navSection">
    <ul>
        <li>Home</li>
        <li><a href="serviceInformation.html">Service Information</a></li>
        <li><a href="aboutUs.html">About Us</a></li>
        <li><a href="directory.html">Directory</a></li>
        <li><a href="contactUs.html">Contact Us</a></li>
    </ul>
</nav>

<section id="sectionSection">
    <h3> Welcome to Trinity Temple Church of God In Christ! </h3></br>
    <hr width = 75% size= "1" color="#b20000" />
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslksadfsadfsdafsdadslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkddddddjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
</section>

<aside id="asideSection">
</aside>

<footer id="footerSection" >
    2900 Josephine St. </br>
    Denver, CO 80207
</footer>

</div>
</body>
</html>

aquí está el código de JavaScript en el archivo externo...

window.addEventListener("load", todaysDate, false);
function todaysDate(){
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();

var completeDate = document.getElementById("footerSection");
footerSection.innerHMTL = "Today's Date: " +completeDate;
alert(month + "/" + day + "/" + year);

}
window.addEventListener("load", todaysDate, false);

Además, aquí está el código en el documento html de información del servicio...

<!doctype html>

<html >
<head lang="en">
<meta charset="utf-8"/>
<script src="churchJavaScript.js"> </script>
<link rel="stylesheet" href="trinity.css"/>
<title> Service Information</title>
</head>

<body>

<div id="CompleteWrapper">
<header id="headerSection">

    <h1> Trinity Temple</h1>
    <h3> &nbsp;&nbsp;And I sent messengers unto them, saying, I am doing a     great work, so that I cannot come down:  </br>
    &nbsp;&nbsp;why should the work cease, whilst I leave it, and come down to      you?  Nehemiah 6:3 </h3> 
</header> 

<nav id="navSection">
<ul>

    <li><a href="index.html">Home</a></li>
    <li>Service Information</li>
    <li><a href="aboutUs.html">About Us</a></li>
    <li><a href="directory.html">Directory</a></li>
    <li><a href="contactUs.html">Contact Us</a></li>
</ul>
</nav>

<section id="sectionSection">
<h2> Service Information </h2></br>
<hr width = 75% size= "1" color="#b20000" />
<h3>Sunday</br></h3>
Sunday School: Sunday 9am - 10:30am </br>
Sunday Service: Sunday 10:30 - 1:00pm</br>
</br>
<h3>Wednesday</br></h3>
Bible Study: 6:30pm - 8:30pm
</br>





</section>

<aside id="asideSection">
</aside>

<footer id="footerSection" >

2900 Josephine St. </br>
Denver, CO 80207
</footer>

</div>
</body>
</html>

Respuesta #1

Prueba esto dentro de tu sección <head>:

<script type="text/javascript" src="churchJavaScript.js"></script>
<link href="trinity.css" rel="stylesheet" type="text/css" />

Asegúrate de que trinity.css, churchJavaScript.js y tu archivo html estén en la misma carpeta.

Es un poco mejor para el rendimiento en sitios web de escritorio colocar el JS antes del CSS. Lee por qué aquí.