Fred: Frage zum Wiki-Artikel „classList“

problematische Seite

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

--
I � Unicode
  1. problematische Seite

    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

    1. problematische Seite

      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

      --
      I � Unicode
    2. problematische Seite

      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

      --
      sumpsi - posui - clusi
      1. problematische Seite

        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

      2. problematische Seite

        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

        --
        I � Unicode
        1. problematische Seite

          Hallo,

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

          Gruß
          Jürgen

          1. problematische Seite

            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

            --
            I � Unicode
            1. problematische Seite

              Hallo,

              warum schreibst du nicht aus meiner Antwort ab?

              Gruß
              Jürgen

              1. problematische Seite

                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

                --
                I � Unicode
        2. problematische Seite

          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

          --
          sumpsi - posui - clusi
  2. problematische Seite

    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

    1. problematische Seite

      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

      --
      sumpsi - posui - clusi
      1. problematische Seite

        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

        --
        "Bin ich denn der Einzigste hier, wo Deutsch kann?"