Linking to external stylesheet and javascript file
Question
I am trying to link my HTML home page to an external css stylesheet and an external javascript(.js) file. For whatever reason depending on which order I list them in the HTML file, only one of them will work. I used a simple alert box in the Javascript file to test if it is working and it only does when the javascript file is linked first. Here is my work...(I am an HTML noob by the way also)
<!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> And I sent messengers unto them, saying, I am doing a great work, so that I cannot come down: </br>
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>
here is the javascript code in the external file...
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);
Also, here is the code in the service information html doc...
<!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> And I sent messengers unto them, saying, I am doing a great work, so that I cannot come down: </br>
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>
1 answers
solution1
5 2013-11-24 00:14:46
Try this inside your <head> section:
<script type="text/javascript" src="churchJavaScript.js"></script>
<link href="trinity.css" rel="stylesheet" type="text/css" />
Make sure trinity.css , churchJavaScript.js and your html file are in the same folder.
It's slightly better for performance on desktop websites to put the js before the css. Read why here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.