Einbinden von js (ts) und HTML-Datei funktioniert nicht

Aleyna_

Mitglied
Hey, ich sitze seit ein paar Tagen an einer Übung für die Uni und hab meinen ts-Code bereits fertig. Das einzige (große) Problem, das ich habe ist, dass mein HTML-Dokument anscheinend nicht auf meinen ts-Ordner zugreifen kann. Meine Webseite wird ganz normal angezeigt, im Entwicklertool wird mir in der Console aber nicht mein ts-Code angezeigt. Weiß einer zufällig woran das liegen könnte?
Würde mich sehr über eine Antwort freuen!
 
K

kneitzel

Gast
Du hast bestimmt etwas falsch gemacht...

Ansonsten kann man so ohne Informationen schlicht nicht mehr sagen. Vielleicht bringst Du einfach mal paar Details. Wie bindest du den Code z.B. ein. Wie rufst Du die html Seite auf u.s.w.
 

Aleyna_

Mitglied
Den Code binde ich wie folgt ein:
<script type="text/javascript" src="hey.js"></script>

Ich habe mit npm install typescript bereits TypeScript installiert und hab mein ts Dokument mit der tsconfig.json compiliert.
Die Webseite rufe ich mit Chrome auf; habe es aber auch mit anderen Browsern versucht und es hat nicht geklappt.
Ich habe auch bereits einen package.json und einen Package-lock.json Ordner.
Ich hoffe das reicht an Informationen, um herauszufinden was ich falsch gemacht habe:)
 
K

kneitzel

Gast
Du öffnest die Seite also vom lokalen Filesystem?
Die html, die du öffnest, ist im gleichen Verzeichnis wie die hey.js?
Die hey.js enthält den gewünschten Code?
 

Aleyna_

Mitglied

mihe7

Top Contributor
Bei solchen Problemen gehe ich immer wie folgt vor: Developer-Console einschalten (F12 in Firefox/Ctrl+Shift+J in Chrome), dort einen Blick in die Konsole selbst werfen. Wenn da nix dramatisches ist, in den Netzwerk-Reiter wechseln und die Seite neu laden. Da muss ein Request für Dein Script vorhanden sein und ggf. wird Dir dort auch ein Fehler angezeigt. Wenn kein Fehler angezeigt wird, dann wurde das Script auch geladen. Das findet man dann auch im Debugger/Sources-Reiter und hier kann man dann weitersuchen.
 

Aleyna_

Mitglied
Bei solchen Problemen gehe ich immer wie folgt vor: Developer-Console einschalten (F12 in Firefox/Ctrl+Shift+J in Chrome), dort einen Blick in die Konsole selbst werfen. Wenn da nix dramatisches ist, in den Netzwerk-Reiter wechseln und die Seite neu laden. Da muss ein Request für Dein Script vorhanden sein und ggf. wird Dir dort auch ein Fehler angezeigt. Wenn kein Fehler angezeigt wird, dann wurde das Script auch geladen. Das findet man dann auch im Debugger/Sources-Reiter und hier kann man dann weitersuchen.
Vielen Dank für den Tipp! Mir wird folgende Fehleranzeige angezeigt:

Uncaught TypeError: Cannot read property 'addEventListener' of null at hey.ts:6 (hey.ts ist mein TypeScript Dokument).
 
Zuletzt bearbeitet:

mihe7

Top Contributor
Ich glaube das bestätigt meinen Verdacht, dass mein Typescript Dokument vom Browser nicht erkannt wird. Oder könnte es daran liegen, dass mein ts Code nicht in js kompiliert wird?
Zum ersten Punkt: da die Ressource erst gar nicht gefunden wird, fehlt wohl einfach die Datei an der Stelle. Zum zweiten Punkt: was heißt, der ts-Code wird nicht nach js kompiliert? Du schreibst doch oben:

und hab mein ts Dokument mit der tsconfig.json compiliert.
Dann sollte ja als Ergebnis JavaScript rauskomen.
 

Aleyna_

Mitglied
Zum ersten Punkt: da die Ressource erst gar nicht gefunden wird, fehlt wohl einfach die Datei an der Stelle. Zum zweiten Punkt: was heißt, der ts-Code wird nicht nach js kompiliert? Du schreibst doch oben:


Dann sollte ja als Ergebnis JavaScript rauskomen.
Also mittlerweile wird mein js Dokument im Entwicklertool angezeigt; ich dachte davor nämlich ich hätte Typescript installiert; hatte ich aber nicht.😳 Deshalb dachte ich, dass mein Code vielleicht nicht in js kompiliert wurde.
 

Aleyna_

Mitglied
Und ich ziehe meine Aussage von vorhin zurück; das Problem liegt glaube ich doch an meinem Code😳

document.addEventListener("DOMContentLoaded", function() {

const About : HTMLDivElement = document.getElementById("Inhalte") as HTMLDivElement;
const button: HTMLButtonElement = document.getElementById("AndertFarbeVonWebseite") as HTMLButtonElement;


button.addEventListener("click", () => {
if(About.classList.contains("alt")) {
About.classList.remove("alt");
} else {
About.classList.add("alt");
}
});
});



Und in folgender Zeile "const About : HTMLDivElement = document.getElementById("Inhalte") as HTMLDivElement;"
wird mir die Fehlanzeige "Uncaught TypeError: Cannot read property 'addEventListener' of null" angezeigt
Die Version ist 4.3.2 und an meinem Code sollte es nicht liegen.
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
N warum kann ich kein javascript und css in mein html script einbinden Angular, React, JQuery - Fragen zu JavaScript 3
E Angular ab 2+ in bestehende Webapp einbinden Angular, React, JQuery - Fragen zu JavaScript 0
F JSON Datei in JavaScript einbinden Angular, React, JQuery - Fragen zu JavaScript 1
D Seite mit Jquery in Pop-Up als IFrame einbinden Angular, React, JQuery - Fragen zu JavaScript 1
R Java Script in ein Htm Datei einbinden? Angular, React, JQuery - Fragen zu JavaScript 4
K Problem mit einbinden Angular, React, JQuery - Fragen zu JavaScript 2
G Problem beim Einbinden von JAVA-Dropdown-Menu Angular, React, JQuery - Fragen zu JavaScript 7
C Link einbinden, wie ? Angular, React, JQuery - Fragen zu JavaScript 4
H0xt html übergibt an js ein wert nicht Angular, React, JQuery - Fragen zu JavaScript 18
C HTML-JAVA Angular, React, JQuery - Fragen zu JavaScript 2
FranziskaN Hilfe Los-Topf in js und html Angular, React, JQuery - Fragen zu JavaScript 18
Zeppi Webserver erweitert index.html Angular, React, JQuery - Fragen zu JavaScript 1
G Variablen aus URL auslesen und in HTML darstellen Angular, React, JQuery - Fragen zu JavaScript 1
isatindersinght jquery convert html to image Angular, React, JQuery - Fragen zu JavaScript 0
T JS/HTML: User Inputs statt Predefines nehmen; onChange Events werden ignoriert Angular, React, JQuery - Fragen zu JavaScript 6
D HTML-Seite erkennt JS-File im Ordner nicht Angular, React, JQuery - Fragen zu JavaScript 4
M Mit innerHTML in eine bestimmte HTML-Datei schreiben Angular, React, JQuery - Fragen zu JavaScript 8
J Html Button mit JavaScript ausführen Angular, React, JQuery - Fragen zu JavaScript 5
D Java Tool um HTML und Javascript zu analysieren Angular, React, JQuery - Fragen zu JavaScript 3
D Variable ohne HTML Tags ausgeben Angular, React, JQuery - Fragen zu JavaScript 14
F Schnellen Browser für HTML mit JS drin. Angular, React, JQuery - Fragen zu JavaScript 6
T html code per javascript einfügen Angular, React, JQuery - Fragen zu JavaScript 7
B HTML, CSS - Frame online aktualisieren Angular, React, JQuery - Fragen zu JavaScript 11
Chris81T Java <> DWR <> JavaScript/HTML Angular, React, JQuery - Fragen zu JavaScript 2
Gossi Frage zu Html (evtl. auch JavaScript?) Angular, React, JQuery - Fragen zu JavaScript 10
J Problem:Zugriff auf Ausgabefeld (HTML-Formular)) Angular, React, JQuery - Fragen zu JavaScript 3
C sort_table.js HTML-Tabelle direkt sortiert anzeigen lassen Angular, React, JQuery - Fragen zu JavaScript 5
O HTML Dropdownliste Angular, React, JQuery - Fragen zu JavaScript 3
J HTML frage mit javascript lösbar? Angular, React, JQuery - Fragen zu JavaScript 3
H Kalender mit Java(Script) in HTML Angular, React, JQuery - Fragen zu JavaScript 6
T HTML Tabelle - per JS neue Zeile Angular, React, JQuery - Fragen zu JavaScript 4
N HTML-Formular mit Java Script berechnen Angular, React, JQuery - Fragen zu JavaScript 4
S User Name an Html übergeben Angular, React, JQuery - Fragen zu JavaScript 6
A Flash-oder HTML Dateien mittels Java Kalenderscript anzeigen Angular, React, JQuery - Fragen zu JavaScript 4
G html mit java auslesen Angular, React, JQuery - Fragen zu JavaScript 6
L Dauerlaufzeile mit Fotos für html Angular, React, JQuery - Fragen zu JavaScript 2
M den Browser auffordern html-seite nachzuladen Angular, React, JQuery - Fragen zu JavaScript 3
D Java Variablen in HTML/Java abrufen Angular, React, JQuery - Fragen zu JavaScript 4
S HTML Cod in einer bestimmten stelle einfügen. Angular, React, JQuery - Fragen zu JavaScript 12
M Umwandeln von Umlauten im HTML form Angular, React, JQuery - Fragen zu JavaScript 10
W Wert aus HTML-Quelltext auslesen Angular, React, JQuery - Fragen zu JavaScript 8
C Flashfilm aus einer HTML-Seite im Fullscreen öffnen Angular, React, JQuery - Fragen zu JavaScript 2
A Java-Script mit HTML ändern Angular, React, JQuery - Fragen zu JavaScript 6
T java-html navigationsproblemchen Angular, React, JQuery - Fragen zu JavaScript 4
J html befehl in JS Angular, React, JQuery - Fragen zu JavaScript 5
B php Datei in JavaScript öffnen Angular, React, JQuery - Fragen zu JavaScript 9
Cellsplitter Api auslesen und in Json Datei speichen - Javascript (node js) Angular, React, JQuery - Fragen zu JavaScript 10
C Inhalt als Datei auf Server speichern Angular, React, JQuery - Fragen zu JavaScript 8
krgewb Datei lesen und Datei erstellen Angular, React, JQuery - Fragen zu JavaScript 3
N Problem - Google Analytics Tracking Javascript Datei von eigenen Server laden Angular, React, JQuery - Fragen zu JavaScript 1
S bat-Datei über Firefox ausführen Angular, React, JQuery - Fragen zu JavaScript 5
S Java "Kommentar" und XLS Datei in Browser implementieren Angular, React, JQuery - Fragen zu JavaScript 2
S Problem mit Aufruf einer *.js-Datei Angular, React, JQuery - Fragen zu JavaScript 2
K Datei auslesen Angular, React, JQuery - Fragen zu JavaScript 2
P Formular wird abgeschickt - php-datei öffnet sich nicht Angular, React, JQuery - Fragen zu JavaScript 3
C Datei per JS auf Festplatte speichern. Angular, React, JQuery - Fragen zu JavaScript 3
T die externe javascript datei Angular, React, JQuery - Fragen zu JavaScript 3
G Erstellungsdatum/-zeit einer anderen Datei ausgeben Angular, React, JQuery - Fragen zu JavaScript 2
D *.js-datei bei Seitenaufruf laden Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Neue Themen


Oben