鏈接到外部樣式表和JavaScript文件

我想將我的HTML主頁鏈接到外部CSS樣式表和外部JavaScript（.js）文件。無論出於何種原因，取決於我在HTML文件中列出它們的順序，只有其中一個會起作用。我在JavaScript文件中使用了一個簡單的警告框來測試它是否正常工作，並且它只在JavaScript文件首先鏈接時纔會執行。這是我的工作......（我順便也一個HTML小白）鏈接到外部樣式表和JavaScript文件

<!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>

這裏是在外部文件中的JavaScript代碼...

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);

而且，這裏是代碼在服務信息的HTML文檔...

<!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>

來源

2013-11-24 Theo Anderson

試試這個你<head>節內：

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

確保trinity.css，churchJavaScript.js和你HTML文件在同一個文件夾中。

在桌面網站上將js放在css之前的性能略好。 Read why here。

來源

2013-11-24 00:14:46 cronoklee

進行了更改，但我注意到，但是當我導航到服務信息頁面時，JavaScript運行但它不會在任何其他頁面上運行......任何建議？ –

您的JavaScript是狡猾的。你會添加兩次'window.load'事件，這會使'todaysDate'函數運行兩次。更重要的是，'footerSection.innerHTML'將導致錯誤，因爲'footerSection'不存在 – cronoklee

鏈接到外部樣式表和JavaScript文件

回答

相關問題