Ankündigung

Einklappen
Keine Ankündigung bisher.

Zuckersyntax in JavaScript

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zuckersyntax in JavaScript

    Hallo Community,

    versuche mich grade in "zuckerbasiertem" Javascript Code also ECMA6 Javascript Klassen, finde aber den folgenden Fehler:

    TypeError: document.getElementById(...) is null
    für folgendes Script nicht:

    Code:
    class parameters {
        constructor(element, listener, method, url, body) {
            this.element = element;
            this.listener = listener;
            this.method = method;
            this.url = url;
            this.body = body;
            document.getElementById(this.element).addEventListener(this.listener, this.validate);
        }
    
        validate() {
    
            const val = document.getElementById(this.element).value;
            const label = document.getElementById(this.element);
    
            if (val.length > 6) {
                label.style.color = "#ff352c";
                label.innerHTML;
                console.log('rot');
            } else if (val.length < 6) {
                label.style.color = "#ff352c";
                label.innerHTML;
                console.log('rot');
    
    
    ............
    
    
                        label.style.color = "#56a40c";
                        label.innerHTML;
                    } else if (content == '') {
                        console.log('false article');
                        label.style.color = "#ff352c";
                        label.innerHTML;
                    }
                    document.removeEventListener('keyup', this.validate, true);
                }
            }
        }
    }

  • #2
    Wie übergibst du denn die id mit '#id' oder 'id'?

    Ansonsten sehe ich nicht viel Zucker, aber du testest ja auch nur,

    Kommentar


    • #3
      Zitat von kaminbausatz Beitrag anzeigen
      Wie übergibst du denn die id mit '#id' oder 'id'?

      Ansonsten sehe ich nicht viel Zucker, aber du testest ja auch nur,
      Aufruf:
      Code:
      let Parameters=new parameters('article','keyup','post','find.php','article');
      this.element stellt die id dar ... ja momentan schmeckts eher noch salzig ...

      Edit: der Fehler tritt erst in den Funktion validate auf .... oben im Konstruktor lädt er den EventListener an die richtige Stelle mit "this.element" daher stehe ich grade auf dem Schlauch.. muß ich die klasseneigenen Variablen "this" der Funktion als Parameter übergeben ??

      Kommentar


      • #4
        Du hast auch eine Id #article ? Normalerweise ist das ein tag

        Kommentar


        • #5
          Zitat von kaminbausatz Beitrag anzeigen
          Du hast auch eine Id #article ? Normalerweise ist das ein tag
          Code:
          <input id="article" class="form-control mr-sm-2 lg" type="text" name="article" placeholder="Art.-Nr." required="">
          Im Konstruktor habe ich die gewünschten this Werte, also wird alles korrekt übergeben, nur unten in der Funktion liegen die this Werte nicht mehr, wo ist der Denkfehler??

          Kommentar


          • #6
            Code:
            document.getElementById(this.element).addEventListener(this.listener, () => this.validate());

            Kommentar


            • #7
              Zitat von kaminbausatz Beitrag anzeigen
              Code:
              document.getElementById(this.element).addEventListener(this.listener, () => this.validate());
              Ok, das geht, woher kommt der Trick, ich mein wo steht sowas?? das die this Parameter dem addEventListener zugewiesen werden verstehe ich aber "() => " ..

              Kommentar


              • #8
                Das ist kein Trick, sondern wie folgt:

                der code:
                Code:
                 document.getElementById(this.element).addEventListener(this.listener, this.validate);
                bindet this an window wenn das Ereignis ausgelöst wird. Du kannst das verhindern indem du es so machst wie in #6 vorgeschlagen oder alternativ folgendes schreibst.

                Code:
                window.addEventListener(this.listener, this.validate.bind(this))
                hier finde ich meinen Vorschlag aus #6 angenehmer.

                Kommentar


                • #9
                  Hi, das hat super weitergeholfen, habe beide Referenzen gebraucht ... Danke. Wo gibts ne einigermaßen brauchbare JS Doku Seite? Oder gibts da mehrere? Ich gehen immer auf Mozilla oder so, 3CSchool aber so richtig Deep geht das nicht ..

                  Kommentar


                  • #10
                    Ich kann Dir da auch keinen guten Tip geben, wenn man das länger macht, hat man das irgenwie drin.

                    Ich halte es so, dass ich mir eine Datenbank angelegt habe in der ich so einen Mist immer eintrage - kann man ja nicht alles im Kopf behalten....

                    Kommentar


                    • #11
                      Ok, so ähnlich halte ich es auch ... code snippets die ich immer bei mir habe ... auf jedenfall Dank.

                      Kommentar


                      • #12
                        Das ist kein "Trick" sondern eine grundlegende Mechanik von JavaScript im Umgang mit dem sog. "this context": https://developer.mozilla.org/de/doc...Operators/this
                        [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

                        Kommentar


                        • #13
                          ... welche durchaus im Gegensatz zu anderen Programmiersprachen etwas gewöhnungsbedürftig ist.

                          Kommentar


                          • #14
                            Mal so am Rande: Ich würde in Javascript nicht mit oop arbeiten. Das entspricht nicht der Idee dieser Sprache. Js ist funktional ausgerichtet. Nicht umsonst ist reactjs auf functional components geswitcht.

                            Kommentar


                            • #15
                              Zitat von xm22 Beitrag anzeigen
                              Mal so am Rande: Ich würde in Javascript nicht mit oop arbeiten. Das entspricht nicht der Idee dieser Sprache. Js ist funktional ausgerichtet. Nicht umsonst ist reactjs auf functional components geswitcht.
                              Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript beschreibt eine dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache. Sie wird allen objektorientierten Programmierparadigmen unter anderem auf der Basis von Prototypen gerecht, deren Deklaration ab ECMAScript 6 mit einer Syntax ermöglicht wird, wie sie ähnlich auch bei klassenbasierten Programmiersprachen üblich ist.
                              https://de.wikipedia.org/wiki/JavaScript

                              PHP war übrigens ursprünglich mal eine Template-Sprache und OOP wurde nur nachträglich drauf gesetzt. Demnach sollte man PHP also auch nicht für OOP verwenden, weil es nicht der Idee dieser Sprache entspricht?

                              Kommentar

                              Lädt...
                              X