Javascript外部文件

這在我的代碼中執行一個簡單的任務;只需切換img src。當腳本在HTML頁面內時，它工作正常，但是當我試圖將其設置爲外部文件時，它無法工作。Javascript外部文件

有什麼建議嗎？

這是外部JS：

var link = document.getElementById('btn1'); 

link.onclick = function switch1() { 
    var a = document.getElementById('img1'); 
    var b = document.getElementById('img2'); 

    var c = a.src; 
    var d = b.src; 
    document.getElementById('img1').src = d; 
    document.getElementById('img2').src = c; 
}

這是HTML文件：

<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="JavaScript.js"></script> 

    <style> 
    .box { 
     position: absolute; 
     display: block; 
     background-color: wheat; 
     width: 90%; 
     height: 60%; 
    } 
    .frame { 
     position: relative; 
     display: block; 
     background-color: Window; 
     left: 10%; 
     top: 10%; 
     width: 80%; 
     height: 80%; 
    } 
    .content { 
     position: relative; 
     display: block; 
     background-color: yellow; 
     left: 10%; 
     top: 10%; 
     width: 80%; 
     height: 80%; 
    } 
    .img1 img { 
     position: absolute; 
     display: block; 
     left: 10%; 
     top: 15%; 
     width: 150px; 
     height: 150px; 
    } 
    .img2 img { 
     position: absolute; 
     display: block; 
     right: 10%; 
     top: 15%; 
     width: 150px; 
     height: 150px; 
    } 
    .button { 
     position: absolute; 
     display: block; 
     background-color: #4CAF50; 
     border: none; 
     color: white; 
     padding: 15px 32px; 
     text-align: center; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 16px; 
     margin: 4px 2px; 
     cursor: pointer; 
     top: 15%; 
     right: 42%; 
    } 
    </style> 
</head> 
<body> 
    <div class="box"> 
    <div class="frame"> 
     <div class="content"> 
     <div class="img1"> 
      <img src="pic/land2.jpg" id="img1" alt="img1"> 
     </div> 
     <div class="img2"> 
      <img src="pic/land1.jpg" id="img2" alt="img2"> 
     </div> 
     <div class="btn"> 
      <button class="button" id="btn1">Button</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

來源

2017-02-13 Abdullah Ibrahem

放'script'標籤後，您的HTML –

或'的window.onload =功能包（）{...}' – mplungjan

你必須做的一兩件事，使其工作，

編寫JavaScript代碼/該功能塊內的功能外部文件：

window.onload= function(){ 
    var link= document.getElementById('btn1'); 

    link.onclick = function switch1() { 
    var a = document.getElementById('img1'); 
    var b = document.getElementById('img2'); 

    var c = a.src; 
    var d = b.src; 
    document.getElementById('img1').src = d; 
    document.getElementById('img2').src = c; 

}

來源

2017-02-13 12:38:08

是啊。就像我評論的那樣 - 只會在頁面中唯一的.onload才起作用 – mplungjan

如果您使用HTML5，請在腳本文件名前面使用正斜槓字符，前提是文件位於網站的根目錄中。

<script src="/JavaScript.js"></script>

如果您使用的是HTML4或XHTML，還需要添加腳本類型。

<script src="/JavaScript.js" type="text/javascript"></script>

來源

2017-02-13 14:02:49 JohnH

Javascript外部文件

回答

相關問題