2017-02-13 161 views
2

这在我的代码中执行一个简单的任务;只需切换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> 
+2

放'script'标签后,您的HTML –

+0

或'的window.onload =功能包(){...}' – mplungjan

回答

0

你必须做的一两件事,使其工作,

编写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; 

} 
+1

是啊。就像我评论的那样 - 只会在页面中唯一的.onload才起作用 – mplungjan

1

如果您使用HTML5,请在脚本文件名前面使用正斜杠字符,前提是文件位于网站的根目录中。

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

如果您使用的是HTML4或XHTML,还需要添加脚本类型。

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