Untitled

function PaintObj(posX, posY, color)
{
        this.posX = posX;
        this.posY = posY;
        this.color = color;
}

//Prototypfunktionen anlegen
PaintObj.prototype.createElement = function()
{
        console.log("square -> createelement");         //Konsoleneintrag für Firebug

        var paintArea = document.getElementById("paintArea");

        this.div = document.createElement("div");
        this.div.style.position = "absolute";
        this.div.style.top = this.posY + "px";
        this.div.style.left = this.posX + "px";
        this.div.style.background = "#" + this.color;

        paintArea.appendChild(this.div);

}; //Strichpunkt weil: weil ich einer funktion direkt gleich etwas zuweise und nicht oben erstelle. Wenn ich die Funktion direkt oben im Konstruktor anlege dann bräuchte man keinen Strichpunkt.


PaintObj.prototype.deleteElement = function(div)
{
        var PaintArea = document.getElementById("paintArea");
        paintArea.removeChild(div);
};


function Square(posX, posY, color, size)
{
        console.log("constructor square");              //Konsoleneintrag für Firebug

        PaintObj.call(this, posX, posY, color );        // Aufruf des Prototyp-Konstruktors
        this.size = size;
}
Square.prototype = new PaintObj();      //Prototyp/Kopie/Klon von PaintObj für neues Quadrat


Square.prototype.draw = function()
{
        console.log("constructor draw");                //Konsoleneintrag für Firebug

        this.createElement();
        this.setClickHandler();

        this.div.style.width = this.size + "px";
        this.div.style.height = this.size +"px";
};


Square.prototype.setClickHandler = function()
{
        this.div.onclick = function()
                {
                        PaintObj.prototype.deleteElement(this); // this in dieser Zeile = div im DOM-Baum
                }
}