Einbindung von JS und CSS klappt nicht, könnte die Fehlerursache sein?

Hallo Leute, ich wollte gerade zum besseren Verständnis von getElementById() ein Beispiel nachbauen, dazu habe ich ein HTML-Dokument erstellt und die entsprechenden JavaScript- und CSS-Dateien eingebunden. Die CSS-Datei im Kopfbereich, die JS-Datei vor dem schließenden body-Tag. Am Ende soll ein roter Rahmen um eine Tabelle erzeugt werden.

Ich dachte erst, dass es am falsch eingegebenen Pfad liegen könnte, aber der ist soweit ich sehe auch richtig. Egal was ich tue, die HTML-Datei wird ausgegeben, aber ohne die JS- und CSS-Komponenten.

Hier der zugehörige JS-Code:

Hier der JS-Code:

function init() {
    // Selektion nach ID
    const mainElement = document.getElementById("main");
    mainElement.className = "border";
}

Hier der CSS-Code:

.border {
    border: thick solid red;
    border-radius: 25px;
    padding: 5px 25px 25px 25px;
}

Answer 1

[Babelfish]

Rufst du denn dein init-Funktion auch irgendwo auf? Also bspw. so, wenn der DOM fertig geladen ist:

document.addEventListener("DOMContentLoaded", () => {
 init();
});

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[StiftausBlei]

omg, ich heule gleich. Nein, das Thema hatte ich in dem Buch noch nicht und der Autor hielt es scheinbar auch nicht für notwendig, dass er darauf verweist. In dem Buchbeispiel kommt der Part überhaupt nicht vor. Stattdessen hat er es in einem Extra-File unten kommentarlos eingefügt.

Und ich suche hier seit einer Stunde den Fehler. Ich danke dir!!!

Answer 2

[Tilo2300]

Rufst du die Funktion init() denn auch irgendwo auf? Z.B im body-onload oder nach einem Klick auf einen Button o.ä.?