EventListener mit Parameter wird nicht aufgerufen

[Chronos]

Hallo Forum,

ich habe eine Reihe von Slidern (RGBA) die mir eine Farbausgabe ermöglichen.
Da ich bisher je eine Methode für Rot, Grün und Blau habe und die grundsätzlich dasselbe tun, wollte ich diese nun zusammen fassen.

Die ganze Klasse nur mit dem Slider für Rot:

window.onload = function () {
    var RgbaHexColorPicker = new ColorPicker();
};

/**
* Class to display rgba- and hex-values
*/
class ColorPicker {
    constructor() {
        this.colorPanel  = document.getElementById('edit-menu__color-panel');
        this.sliderRed   = document.getElementById('slider-red');

        // Input-fields
        this.inputRed    = document.getElementById('input-red');

        // Methods
        this.setRed            = this.setRed.bind(this);

        // Default values
        this.red         = 0;

        this.addEventListeners();
    }

    /**
     * Adds event listeners and calls functions for input-events
     */
    addEventListeners() {
        this.sliderRed.addEventListener('input', this.setColor);
    }


    /**
     * Set value for red,
     * update colorPanel-view and inputRed
     */
    setRed() {
        let red = this.sliderRed.value;

        if (red !== this.red) {
            this.red = red;
        }
    }
}

Das ganze wiederholt sich dann noch für Grün und Blau, plus einer Ausgabe jeweils die ich jetzt weggelassen habe.

Da es wie gesagt immer dasselbe ist, wollte ich eine neue Methode 'setColor(property)' mit einem Parameter für property schreiben um das ganze zu kürzen, das Problem ist aber, dass irgendwie die Methode on input nicht mehr aufgerufen wird, nur einmalig im Konstruktor:

geändert in addEventListners:

this.sliderRed.addEventListener('input', this.setColor('Red'));

neue Methode:

setColor(property) {
        let sliderName = 'slider' + property;
        console.log(sliderName);
        // >> sliderRed

        var wert = this[sliderName].value;
        console.log(wert);
}

Wieso erhalte ich da nun nicht mehr den aktuellen Wert bzw. wird kein Event mehr gefeuert?

Danke schon mal

 

[Tronjer]

Weil die Methode nur im Konstruktor aufgerufen wird, welcher einmalig bei der Initialisierung der Komponente ausgeführt wird.

Mache es dir doch einfach und binde Angular2 ein. Da gibt es neben constructor() {} eine Reihe von Lifecycle Hooks zur Überwachung von Changes, und das Onload-Event brauchst du auch nicht mehr.
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

 

[Chronos]

Okay danke für den Hinweis.
Das kann sein aber ich möchte es noch nicht nutzen, ich sehe das ganze als Chance Grundlagen zu lernen und da möchte ich möglichst auf Frameworks verzichten.

Was wäre denn ein Ansatz das ohne Angular zu tun?

 

[Tronjer]

kA, ich habe mich mit ES6 bisher ausschließlich im Rahmen von Angular und TypeScript beschäftigt.

Mein erster Ansatz wäre, die Methode zu returnen. Falls das nicht funktioniert, würde ich nach ES6 und Lifecycle Hooks googeln.