Javascript externe Datei

Dies in meinem Code für eine einfache Aufgabe; Einfach den img src schalten. Es funktionierte gut, wenn das Skript innerhalb der HTML-Seite war, aber als ich versuchte, es zu einer externen Datei zu machen, funktionierte es nicht.Javascript externe Datei

Irgendwelche Ratschläge?

Dies ist die externe 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; 
}

Und das ist die HTML-Datei:

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

Quelle

2017-02-13 Abdullah Ibrahem

put 'script' Tag nach dem HTML –

oder wickeln in' window.onload = function() {...} ' – mplungjan

Sie eine Sache zu tun haben, damit es funktioniert,

schreiben Sie Ihren JavaScript-Code/Funktion in diesem Block in der externen Datei:

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; 

}

Quelle

2017-02-13 12:38:08

Yup. So wie ich es kommentiert habe - funktioniert aber nur, wenn das die einzige .onload auf der Seite ist – mplungjan

Wenn Sie HTML5 verwenden, verwenden Sie vor dem Namen der Skriptdatei einen Schrägstrich, wenn sich die Datei im Stammverzeichnis der Website befindet.

Wenn Sie HTML4 oder XHTML verwenden, fügen Sie auch den Skripttyp hinzu.

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

Quelle

2017-02-13 14:02:49 JohnH

Javascript externe Datei

Antwort

Verwandte Themen