Verknüpfen von externer JavaScript-Datei mit HTML

Ich bin neu in JavaScript und versuche, meinen JavaScript-Code mit HTML zu verknüpfen. Zusammen mit dem unten erwähnten Code habe ich auch unten Variationen im Skript-Tag in HTML versucht, aber keiner von ihnen hat funktioniert.Verknüpfen von externer JavaScript-Datei mit HTML

Bitte lassen Sie mich wissen, wie Sie meine externe Datei mit HTML verknüpfen.

Hier ist meine Ordnerstruktur:

Beispiele von dem, was ich versucht habe -

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

<script type="text/javascript" src="~/Source Pakages/js/vehicle.js">    
    </script> 

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

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

index.html -

<html> 
<head> 

    <script type="text/javascript" src="G:\ajaxx\src\java\js\vehicle.js">    
    </script> 

</head> 
<body onload = "loadMovies()"> 
    <div id = "p1"></div> 
</body> 
</html>

vehicle.js -

diese

function loadMovies() 
{ 
    document.getElementById("p1").innerHTML = ' <select>'+ 
     ' <option value="volvo">Volvo</option>'+ 
     ' <option value="saab">Saab</option>'+ 
     '<option value="mercedes">Mercedes</option>'+ 
     '<option value="audi">Audi</option>'+ 
     '</select>' 
}

Quelle

2016-12-25 krishna

'src = ist "../ Quelle pakages/js/vehicle.js"' – David

Kleine Anmerkung zu G: \ Pfad: der Pfad geladen wird * durch der Browser * also muss der Pfad absolut * in der Browseransicht sein * also immer protocol: //yourserver.com/path/to/file –

Verwendung:

<script type="text/javascript" src="../Source Packages/js/vehicle.js"></script>

Quelle

2016-12-25 14:54:13 ab29007

Bitte überprüfen Sie das Verzeichnis richtig –

Entschuldigung. Ich habe es bearbeitet, als Sie kommentiert haben. aber ich danke Ihnen für den Hinweis – ab29007

Ich habe versucht, den obigen Code und das Programm in Chrome und Edge-Browser ausführen, aber es zeigt immer noch einen leeren Bildschirm. – krishna

Verwendung dieses folgenden Code,

<html> 
<head> 
    <script type="text/javascript" src="../Source Pakages/js/vehicle.js">    
    </script> 
</head> 
<body onload = "loadMovies()"> 
    <div id = "p1"></div> 
</body> 
</html>

Quelle

2016-12-25 14:56:04

Ich habe versucht, den obigen Code und das Programm in Chrome und Edge-Browser ausführen, aber es zeigt immer noch einen leeren Bildschirm. – krishna

Auch setzen Sie Ihre Funktion loadmovies() innerhalb Script-Tag

<script> 
    function loadMovies() { 
    ... 
    } 
    </script>

Quelle

2016-12-25 14:57:01

Regel, die meisten JavaScript-Code wird in eine externe Datei eingefügt, die wie folgt an HTML angehängt ist:

<script src="/path/to/script.js"></script>

Der /path/to/script.js ist ein relativer Pfad. Wenn Sie einen bestimmten Ort haben, einschließlich der vollständigen URL, die der absolute Pfad ist. Relative Pfade sind relativ zu Ihrem aktuellen Standort auf der Website.

können Sie es verwenden, als

<script type="text/javascript" src="../Source Pakages/js/vehicle.js"></script>

Dies ist, wie Sie Ihren Code wie

<html> 
<head> 
<script type="text/javascript" 
     src="../Source Pakages/js/vehicle.js"> 
</script>  
     <script type="text/javascript"> 
     function loadMovies() 
     { 
     document.getElementById("p1").innerHTML = ' <select>'+ 
     ' <option value="volvo">Volvo</option>'+ 
     ' <option value="saab">Saab</option>'+ 
     '<option value="mercedes">Mercedes</option>'+ 
     '<option value="audi">Audi</option>'+ 
     '</select>' 
     } 


     </script> 
    </head> 
    <body onload = "loadMovies()"> 
     <div id = "p1"></div> 
    </body> 
</html>

Quelle

2016-12-25 14:59:38

aussehen Es sieht aus wie Sie versuchen, Code anzupassen, die Sie kopiert, da Ihre loadMovies() Funktion nichts zu mit Filmen machen. Es ist in Ordnung, Code zu borgen und an Ihre Situation anzupassen, aber Sie sollten die Namen so ändern, dass sie der Funktionalität entsprechen. Es macht Ihren Code einfacher zu lesen.

Wenn sich Ihre JavaScript-Datei im selben Verzeichnis wie Ihre HTML-Datei befindet, können Sie einfach <script src="vehicle.js"></script> verwenden. Dies bedeutet jedoch nicht, dass Sie der Verzeichnisstruktur zum Speicherort der JS-Datei folgen müssen. In deinem Fall bedeutet das, dass du zwei Stufen hinauf gehst und dann zwei Stufen runterfährst. <script src="../../Source Packages/js/vehicle.js"></script>. Ich nehme auch an, dass das JavaScript, das Sie nach dem Schließen des Tags </html> anzeigen, der Inhalt Ihrer .js-Datei ist ... richtig?

Da Sie auf einer Windows-Maschine sind, wird Ihr Dateipfad ein wenig anders aussehen, aber nicht viel. Sie ändern einfach das '/' in '\' und es sollte alles funktionieren. Hier sind zwei Beispiele. Die erste ist für eine 'NIX-Maschine (Unix, Linux, OSX, etc) und die zweite (die für Sie gelten würde) ist für eine Windows-Maschine. Beachten Sie, dass Ihr Computer zwar Windows-basiert ist, der Server, auf dem Ihr Code endet, jedoch nicht vorhanden ist. Daher ist es wichtig, den Unterschied zu kennen.

(für ‚NIX Machines) index.html -

<html> 
    <head> 
    <script type="text/javascript" src="../../Source Packages/js/vehicle.js"></script> 
    </head> 
    <body onload = "loadVehicles()"> 
    <div id = "p1"></div> 
    </body> 
</html>

vehicle.js -

function loadVehicles() { 
    document.getElementById("p1").innerHTML = ' <select>'+ 
     ' <option value="volvo">Volvo</option>'+ 
     ' <option value="saab">Saab</option>'+ 
     '<option value="mercedes">Mercedes</option>'+ 
     '<option value="audi">Audi</option>'+ 
     '</select>'; 
}

(Für Windows Machines) index.html -

<html> 
    <head> 
    <script type="text/javascript" src="..\..\Source Packages\js\vehicle.js"></script> 
    </head> 
    <body onload = "loadVehicles()"> 
    <div id = "p1"></div> 
    </body> 
</html>

vehicle.js -

function loadVehicles() { 
    document.getElementById("p1").innerHTML = ' <select>'+ 
     ' <option value="volvo">Volvo</option>'+ 
     ' <option value="saab">Saab</option>'+ 
     '<option value="mercedes">Mercedes</option>'+ 
     '<option value="audi">Audi</option>'+ 
     '</select>'; 
}

übernimmt dies natürlich, dass die Ordnerstruktur

Quelle

2016-12-25 15:22:02 quarterpi

Ja, ich hatte den Code von einem meiner vorherigen Beispiele kopiert, die ich versuchte. Da die Ausgabe nicht kam, lag der Hauptfokus darauf, sie zu bekommen. Sobald der Code in Ordnung ist, würde ich den Namen bearbeiten. Ja, der Code nach ist mein JavaScript-Code. – krishna

@krishna Hast du es mit dem vorgeschlagenen Pfad versucht? – quarterpi

Ja, ich habe alle unten genannten Kombinationen ausprobiert und versucht, die Ausgabe in Chrome und Edge Browser zu überprüfen, aber die Ausgabe war ein leerer Bildschirm in beiden Browsern. Wenn möglich, bitte versuchen Sie den Code auf Ihrem System und beraten, ob es funktioniert. IDE von mir verwendeten Netbeans 8.1 – krishna

Verknüpfen von externer JavaScript-Datei mit HTML

Antwort

Verwandte Themen