Javascript 外部文件
[英]Javascript external file
問題描述
這在我的代碼中用於一個簡單的任務； 只需切換img src 。 當腳本在 HTML 頁面中時它運行良好，但是當我嘗試將其設置為外部文件時它不起作用。
有什么建議嗎？
這是外部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 個解決方案
解決方案1
1 2017-02-13 14:02:49
如果您使用 HTML5，如果文件位於網站的根目錄中，則在腳本文件名前使用正斜杠字符。
<script src="/JavaScript.js"></script>
如果您使用 HTML4 或 XHTML，還要添加腳本類型。
<script src="/JavaScript.js" type="text/javascript"></script>
解決方案2
0 2017-02-13 12:38:08
你必須做一件事才能讓它發揮作用
在外部文件中的此塊中寫入您的 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;
}
外部文件中的Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.