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を使用している場合、ファイルがWebサイトのルートディレクトリにある場合は、スクリプトファイル名の前にスラッシュ文字を使用します。

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

HTML4またはXHTMLを使用している場合は、スクリプトタイプも追加します。

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

出典

2017-02-13 14:02:49 JohnH

答えて

関連する問題