Implementieren Sie JS in HTML

Es sollte einfach sein, aber so einfach wie es sein sollte kann ich das Problem nicht lösen.Implementieren Sie JS in HTML

Wenn ich den folgenden HTML- und JS-Code in einen Online-Editor eintippe, funktioniert alles einwandfrei, aber wenn ich das in meinen (Offline-) Editor eintippe, wird es nicht funktionieren. Hier ist der Online-Code: http://jsbin.com/kenurunahu/1/edit?html,js,output)

Ich wette, es hat etwas mit der Ladereihenfolge und wie die Dateien verknüpft zu tun.

Das ist, wie meine (lokal) HTML-Datei sieht aus wie (wo die Dateien verknüpft sind):

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" content="Index.css"> 
 
    <script src="Script.js"></script> 
 
</head> 
 

 
<body> 
 
    <p id="demo"> 
 
    something 
 
    </p> 
 
</body> 
 

 
</html>

Vielen Dank für Hilfe!

[Update] Firefox und Chrome zeigen die JS-Datei an. Manchmal bekomme ich eine Fehlermeldung, dass 'innerHTML ist null', aber wenn ich den gleichen Code in die Konsole schreibe, funktioniert alles gut.

Quelle

2016-05-07 David

Was passiert, wenn Sie die .html-Datei in Ihrem Browser öffnen? – JordanHendrix

Erzielen Sie Fehler in der Entwicklerkonsole (öffnen Sie sie durch Drücken von F12 in Ihrem Browser)? – Oisin

Sie sollten eine Datei mit dem Namen 'Script.js' auf der gleichen Ebene wie Ihre' html' Datei haben. –

Sie haben den Fehler, wenn die js Skript vor dem HTML-DOM geladen wird vollständig durch den Browser geladen wird.Eine einfache Lösung für Ihre Tests ist das Skript enthalten am Ende der HTML-Seite zu platzieren, wie folgt aus:

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" content="Index.css"> 
</head> 

<body> 
    <p id="demo"> 
    something 
    </p> 
    <script src="Script.js"></script> 
</body> 

</html>

Eine bessere Lösung ist Ihr Skript nur ausgeführt, wenn der Dom ist voll geladen. Zum Beispiel mit dem Körper onload Ereignis:

<body onload="yourFunc()">

Oder Ereignis besser nur js-Code, zum Beispiel mit jquery-Ready-Funktion oder durch einen einfachen benutzerdefinierten Handler zu schreiben, die auf allen gängigen Browser funktionieren sollen:

document.addEventListener("DOMContentLoaded", function(event) { 
    //call your func here 
});

Hoffe, dass hilft.

Quelle

2016-05-07 16:09:04 Dypso

Es hat sehr geholfen! Vielen Dank! – David

Ein paar Vermutungen:

Kapitalisierung ist wichtig. Wenn die Datei script.js gestattet verlinken nicht auf Script.js
Ist Ihre js-Datei im selben Ordner wie die index.html Dokument? Weil du das sagst.

Normalerweise wir unsere Dateistruktur so etwas wie dies arrangieren:

public_html - css - js - img - inc

Wenn Ihre Stile/scripts gespeichert sind in Unterordnern, wie js und css, dann müssen Sie ändern Ihre Verweise auf:

<link rel="stylesheet" content="css/Index.css"> 
<script src="js/Script.js"></script>

Quelle

2016-05-07 15:32:33 gibberish

Sowohl yes, Firefox und Chrome zeigen die JS Datei an. Manchmal bekomme ich eine Fehlermeldung, die sagt "innerHTML ist null", aber wenn ich den gleichen Code in die Konsole schreibe, funktioniert alles gut (sorry, ich hätte das vorher erklären sollen). – David

@David: Der Grund dafür, dass "null" manchmal heißt, ist die Tatsache, dass Ihr DOM möglicherweise nicht bereit ist, wenn das Skript ausgeführt wird. Dein Skript wird also nicht das "Demo" finden. Platzieren Sie Ihr Skript direkt vor dem Schließen Ihres 'body' Tags –

Als gute Praxis, sollten Sie Ihre Skripte auf die Schließung vonplatziert werdenMarkierung. Externe Skripte blockieren und daher wäre es sinnvoll, sie nicht an die Spitze zu setzen. Auch wenn Ihr script an der Spitze ausgeführt wird, ist Ihr DOM möglicherweise nicht bereit, was bedeutet, dass jedes Element, auf das Ihr Skript zuzugreifen versucht, überhaupt nicht in DOM vorhanden ist, was zu Ihrem Fehler führt.

Daher sollten alle Ihre Skripte am Ende des body Tags sein. Wenn das Skript geladen und ausgeführt wird, können Sie sicher sein, dass das DOM bereit ist.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" content="Index.css"> 
 

 
</head> 
 

 
<body> 
 
    <p id="demo"> 
 
    something 
 
    </p> 
 
    <script src="Script.js"></script> 
 
</body> 
 

 
</html>

Quelle

2016-05-07 16:01:25

Danke! Da alle anderen Dinge, wie Bilder, Favicons und CSS-Dateien, im Kopfbereich verlinkt sind, dachte ich, es wäre gut, das Skript dort zu haben. – David

@David Ich habe fast alle meine Skripte/Links-to-Skripte in den '' Abschnitt eingefügt. Es ist nicht unbedingt notwendig, sie vor "" zu platzieren. Es ist nichts falsch daran, dies zu tun, und manchmal ist das das Beste, was zu tun ist, aber normalerweise ist es kein Problem. – gibberish

Ja, aber mein Skript bezieht sich auf etwas im HTML - es kann nicht aufgerufen werden, wenn es im Moment nicht existent ist. – David

Implementieren Sie JS in HTML

Antwort

Verwandte Themen