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



## Aleyna_ (28. Mai 2021)

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!


----------



## kneitzel (28. Mai 2021)

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_ (28. Mai 2021)

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


----------



## kneitzel (28. Mai 2021)

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?


----------



## M.L. (28. Mai 2021)

Weiterhin könnte man die Einrichtung und Nutzung von TypeScript mithilfe eines (älteren) Tutorials überprüfen: https://entwickler.de/online/javascript/web-app-tutorial-typescript-javascript-579888415.html


----------



## Aleyna_ (28. Mai 2021)

kneitzel hat gesagt.:


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


Ja, genau.


----------



## Aleyna_ (28. Mai 2021)

M.L. hat gesagt.:


> Weiterhin könnte man die Einrichtung und Nutzung von TypeScript mithilfe eines (älteren) Tutorials überprüfen: https://entwickler.de/online/javascript/web-app-tutorial-typescript-javascript-579888415.html


Vielen Dank für den Link! Ich konnte leider nichts zu meinem Problem finden. Ich habe mir auch bereits einige Artikel und Videos angesehen und bin meinen Code etliche Male durchgegangen, aber finde meinen Fehler einfach nicht


----------



## M.L. (28. Mai 2021)

Aleyna_ hat gesagt.:


> aber finde meinen Fehler einfach nicht


Wie sehen die Quellcodes (in Code-Tags posten) und die verwendete TS-Version aus ?


----------



## mihe7 (28. Mai 2021)

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_ (28. Mai 2021)

mihe7 hat gesagt.:


> 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).


----------



## Aleyna_ (28. Mai 2021)

M.L. hat gesagt.:


> Wie sehen die Quellcodes (in Code-Tags posten) und die verwendete TS-Version aus ?


Die Version ist 4.3.2 und an meinem Code sollte es nicht liegen.


----------



## mihe7 (28. Mai 2021)

Aleyna_ hat gesagt.:


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



Aleyna_ hat gesagt.:


> und hab mein ts Dokument mit der tsconfig.json compiliert.


Dann sollte ja als Ergebnis JavaScript rauskomen.


----------



## Aleyna_ (28. Mai 2021)

mihe7 hat gesagt.:


> 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_ (28. Mai 2021)

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


Aleyna_ hat gesagt.:


> Die Version ist 4.3.2 und an meinem Code sollte es nicht liegen.


----------



## mihe7 (28. Mai 2021)

Hat denn der Button auch die angegebene ID?


----------



## Aleyna_ (29. Mai 2021)

mihe7 hat gesagt.:


> Hat denn der Button auch die angegebene ID?


Ja, hat er.


----------



## mihe7 (29. Mai 2021)

Dann musst Du mal den kompletten Code inkl. HTML zeigen, das artet ja hier zum Ratespiel aus.


----------

