JS onclick und (pseudo)Klasse

cottton · 16. Oktober 2014

Moin, irgendwie steh ich aufm Schlauch.
Ich komm nicht dahinter, wieso die onclick Funktion nicht mach, was sie soll:

HTML

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title></title>




    <script type="text/javascript">
        MyClass =
        {
            container   :null,
            button      :null,
            textfield   :null,




            init:function()
            {
                this.container  = document.getElementById("container");
                this.textfield  = document.getElementById("textfield");
                this.button     = document.getElementById("button");




                // erster versuch: Uncaught TypeError: undefined is not a function
                /*this.button.onclick = function(){this.change()};*/




                // zweiter versuch: wird sofort ausgefürt, aber nicht onclick (was es ja soll)
                this.button.onclick = this.change();
                return;
            },
            change:function()
            {
                //alert(this.textfield.value)
                this.container.innerHTML = this.textfield.value;
                return;
            }
        }




        document.onreadystatechange = function(){
            if(document.readyState == "complete"){
                MyClass.init();
            }
        }
    </script>
</head>
<body>
    <div id="container">hier soll der inhalt vom textfiel onclick rein</div>
    <input type="text" id="textfield" value="" />
    <button id="button">do</button>
</body>
</html>

Alles anzeigen

Wie bekomm ich denn das onclick da "rein" oO?

Basi · 16. Oktober 2014

JavaScript

this.button.addEventListener('click', this.change, false);

Du musst dann darauf achten, dass this in der Methode change sich jetzt auf den Button bezieht, sprich du musst so vorgehen:

JavaScript

MyClass.container.innerHTML = MyClass.textfield.value;

cottton · 16. Oktober 2014

Das funktioniert schon mal Danke.
~~Verstehe aber nicht, warum this.button.onclick nicht funktioniert.~~
EDIT: ich Depp - habs ja nicht kopiert, sondern durch die Klammern () ausgeführt.

Und bekommt man denn nicht irgendwie this (das Objekt von MyClass) in die Methode?
Hab das bisher auch immer mit direktem Name angesprochen, aber das muss doch in JS möglich sein.

Das hier funzt leider nicht:

JavaScript

this.button.addEventListener('click', this.change(this), false); // this an change() übergeben
// ...
change:function(obj) // this als obj entgegen nehmen
{
    //alert(this.textfield.value)
    /*this.container.innerHTML = this.textfield.value;*/
    obj.container.innerHTML = obj.textfield.value;
    return;
}

Basi · 16. Oktober 2014

Du musst auf jeden Fall eine Referenz zwischen MyClass.button und MyClass.change herstellen, ein Kindknoten in einem Objekt weiß leider nicht welches sein Elternelement ist. Von daher kannst du entweder im addEventListener eine anonyme Funktion ausführen welche dann MyClass.change ausführt, dann kannst du in der change Funktion this verwenden, oder du verwendest im addEventListener-Befehl this und musst in der change Funktion die Referenz mittels MyClass bilden.

Ich hoffe das war einigermaßen verständlich Es gibt alternative Lösungen, die sind allerdings mit Mehrcode verbunden und somit nicht unbedingt sinnvoll.

cottton · 17. Oktober 2014

Zitat von Basiii

Ich hoffe das war einigermaßen verständlich

Ja, doch =)
mit ner anonymen Funktion ist es mMn dann am sinnvollsten. Denn wenn this in der Methode "auf einmal" der Button ist, verwirrt das nur unnötig

Falls es jemand noch mal testen möchte:

JavaScript

MyClass =
        {
            container   :null,
            button      :null,
            textfield   :null,




            init:function()
            {
                this.container  = document.getElementById("container");
                this.textfield  = document.getElementById("textfield");
                this.button     = document.getElementById("button");




                // variante 1:
                this.button.addEventListener('click', function(){MyClass.change1();}, false);




                // variante 2:
                this.button.addEventListener('click', this.change2, false);
                return;
            },
            // variante 1:
            change1:function()
            {
                // this ^= object (MyClass)
                this.container.innerHTML = this.textfield.value;
                return;
            },
            // variante 2:
            change2:function()
            {
                // this ^= html element (button)
                MyClass.container.innerHTML = MyClass.textfield.value;
                return;
            }
        }

Alles anzeigen

JS onclick und (pseudo)Klasse

Jetzt mitmachen!

Teilen