Frage zum Wiki-Artikel „classList“

[Fred]

Hallo,

das Beispiel https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-element-classList.add.html funktioniert nicht, das schließende script Element befindet sich vor dem schließenden body. Es muss aber vor das title Element.

Wie ändere ich das Script, so das es beim Laden der Seite ausgeführt wird? Einfach ein window.onload davor?

  window.onload = function klasseHinzufügen() {
    var hinweis = document.getElementById('tipp');
	hinweis.classList.add('sicherheitshinweis');
  }

Gruß

Fred

[Robert B.]

Hallo Fred,

Wie ändere ich das Script, so das es beim Laden der Seite ausgeführt wird? Einfach ein window.onload davor?

  window.onload = function klasseHinzufügen() {
    var hinweis = document.getElementById('tipp');
	hinweis.classList.add('sicherheitshinweis');
  }

das wird nicht funktionieren, da beim Laden der Seite unter Umständen noch nicht der DOM-Content geladen ist, d.h. es würde kein Element mit der entsprechenden ID gefunden.

Viele Grüße
Robert

[Fred]

Hallo Robert,

das wird nicht funktionieren, da beim Laden der Seite unter Umständen noch nicht der DOM-Content geladen ist, d.h. es würde kein Element mit der entsprechenden ID gefunden.

Javascript ist ein rotes Tuch für mich, habe mich durch unser Wiki gelesen und bin zu diesem Ergebnis gekommen:

function klasseHinzufügen() {
var hinweis = document.getElementById('tipp');
hinweis.classList.add('ausblenden');
}
document.addEventListener('DOMContentLoaded', klasseHinzufügen);

Gruß

Fred

[Rolf B]

Hallo Robert,

window.onload

das wird nicht funktionieren, da beim Laden der Seite

Du irrst. Das Event heißt nicht loading, sondern load (und müsste besser loaded heißen). Wenn load getriggert wird, ist das DOM da und die Seitenressourcen (Bilder) auch.

Vorher wird noch DOMContentLoaded getriggert, da hat man das DOM schon, aber die Bilder laden ggf. noch.

D.h. Freds zweiter Vorschlag ist genau richtig. Wobei man die Funktion nicht separat halten muss, sondern anonym als 2. Parameter an addEventListener übergeben kann.

Rolf

[Robert B.]

Hallo Rolf,

Du irrst. Das Event heißt nicht loading, sondern load (und müsste besser loaded heißen). Wenn load getriggert wird, ist das DOM da und die Seitenressourcen (Bilder) auch.

Aha:

Verwenden Sie DOMContentLoaded anstelle von load, damit Skripte schon geladen werden, bevor alle Bilder und anderen Mediendateien fertig geladen sind.

Das entspricht auch meiner Erfahrung bisher.

Viele Grüße
Robert

[Fred]

Hallo Rolf,

D.h. Freds zweiter Vorschlag ist genau richtig. Wobei man die Funktion nicht separat halten muss, sondern anonym als 2. Parameter an addEventListener übergeben kann.

Verrätst du mir wie man das notieren muß?

Gruß

Fred

[JürgenB]

Hallo,

document.addEventListener('DOMContentLoaded', function(event) {
  …
}); 

Gruß
Jürgen

[Fred]

Hallo,

document.addEventListener('DOMContentLoaded', function(event) {
  …
}); 

wie ich schon sagte, mit JavaScript habe ich es nicht so. Ist es so richtig?

document.addEventListener('DOMContentLoaded', function klasseHinzufügen() {
var hinweis = document.getElementById('tipp');
hinweis.classList.add('ausblenden');
});

schönes WE Fred

[JürgenB]

Hallo,

warum schreibst du nicht aus meiner Antwort ab?

Gruß
Jürgen

[Fred]

Hi,

warum schreibst du nicht aus meiner Antwort ab?

denke ich schon wieder zu kompliziert?

document.addEventListener('DOMContentLoaded', function(event) {
var hinweis = document.getElementById('tipp');
hinweis.classList.add('ausblenden');
});

Fred

[Rolf B]

Hallo Jürgen,

danke - ich hatte die Antwort etwa zeitgleich mit Dir stehen und dann wurde ich vom Computer automatisch ausgeloggt. Futschikato die Antwort.

Was ich da noch schreiben wollte: Es gibt mehrere Wege, Funktionsobjekte in JavaScript zu erzeugen, und im Ergebnis sind sie leicht unterschiedlich.

function foo(x) {
   return x+1;
}
var bar = function(y) {
   return y+1;
};
var who = function what(y) {
   return y+1;
};

var ano = getFunction();


function getFunction() {
   return function() { return 7; };
}

Mal abgesehen von getFunction entstehen hier 4 Variablen, und jede bekommt ein function-Objekt. Alle Variablen sind übrigens überschreibbar.

foo enthält ein function-Objekt, dessen name-Eigenschaft den Wert "foo" bekommen hat.
Bei bar KANN das sein (Chrome), muss aber nicht (Edge). Die function in ano hat definitiv einen leeren Namen

Die function in who ist etwas besonderes. Sie ist mit einem benannten function-Objekt initialisiert worden. Die name-Eigenschaft dieses function-Objekts hat daher den Wert "what", obwohl es in der Variablen "who" steht. Ganz wichtig: eine globale Variable "what" entsteht nicht. Dafür entsteht aber eine LOKALE Variable "what", die im Code dieser function verfügbar ist und die Du benutzen kannst, um innerhalb eines Funktionsaufrufs auf das function-Objekt zuzugreifen. Warum? Hauptsächlich für Rekursionen. Du kannst das Function-Objekt aber auch nutzen, um Dir Aufruf-übergreifend Werte zu merken. Ob das guter Stil ist, ist eine andere Frage 😀

function getNextNumber() {
   getNextNumber.currentValue = (getNextNumber.currentValue || 0) + 1;
   return getNextNumber.currentValue;
}

console.log(getNextNumber(), getNextNumber(), getNextNumber());
// 1, 2, 3
}

Rolf

[JürgenB]

Hallo,

das Beispiel https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-element-classList.add.html funktioniert nicht, das schließende script Element befindet sich vor dem schließenden body. Es muss aber vor das title Element.

danke, ich habe den Fehler korrigiert. Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

da stimmt jetzt was nicht. Ich glaube, dass Frickl nur mit Beispielen klar kommt, wo das Script im head steht. Guck dir das Frickl zum Beispiel an - da steht das Script zweimal drin, und Änderungen im Script-Fenster greifen nicht.

Und die Anzeige des Beispiels auf der Wiki-Seite des Beispiels ist jetzt kaputt, statt eines großen Rahmens sind es nun mehrere und das Highlighting ist auch weg. Offenbar ist da ein "Beispiel-Modus" verloren gegangen. Ich habe nur keine Ahnung woran das liegt, und es scheint das Beispiel in der Funktion nicht zu beinträchtigen. Weißt Du was das ist?

Ich möchte nicht einfach so am Beispiel rumeditieren, auch wenn ich es vielleicht könnte. Vermutlich weißt Du besser als ich, wie man das richten muss.

Im konkreten Fall war es übrigens gar nicht nötig, das Script zu verlegen oder mit einem Ready-Handler zu arbeiten. Das Script hat lediglich eine Funktion definiert, die wird aber erst ausgeführt wenn der Button geklickt wird. Zu DIESEM Zeitpunkt ist das DOM bereit.

Rolf

[Matthias Scharwies]

Servus!

Hallo Jürgen,

da stimmt jetzt was nicht. Ich glaube, dass Frickl nur mit Beispielen klar kommt, wo das Script im head steht. Guck dir das Frickl zum Beispiel an - da steht das Script zweimal drin, und Änderungen im Script-Fenster greifen nicht.

Ja, du hast Recht. Wie hier unter Hilfe:Artikel/Beispiele#Frickl beschrieben, sollte das JS im head stehen.

Dies sind Beispiele, die ich vor der Implementierung des Frickl erstellt habe. Mit Rechtsklick im neuen Tab funktionieren sie. Ich hoffe aber, dass wir jetzt so langsam alle durch ein JS im head mit modernen EventListenern ersetzt haben.

Herzliche Grüße

Matthias Scharwies