✔ Problem mit funktionen bei Eventlistener

[Jan-Frederik Stieler]

Hi,
ich kapier irgendwie nicht warum bei meinem Script die Funktionen direkt nach dem laden feuern udn warum diese dann nicht mehr in den Eventlistener ausgeführt werden?

https://jsbin.com/dujizih/edit?html,js,console,output

 

[Sempervivum]

Beliebter Fehler. Was hier passiert:

showGridCheck.addEventListener('click', showOpacityGrid());

ist folgendes: Weil der Funktionsname von einem Klammernpaar gefolgt wird, wird die Funktion sofort beim Registrieren ausgeführt und ihr Rückgabewert, der undefiniert ist, registriert. Du kannst das Problem lösen, indem Du einfach das Klammernpaar weg lässt, dann wird eine Referenz der Funktion übergeben.
Und beim opacitySlider passiert das selbe. Hier müsstest Du eine anonyme Funktion verwenden:

opacitySlider.addEventListener('input', (event) => {
    changeOpacity(opacitySlider.value / 100);
});

oder die Berechnung gleich in der Funktion machen:

    function changeOpacity(event) {
        const opacityVal = event.target.value / 100;
        //get all dev grid columns.
        let columns   = document.querySelectorAll('.grid-column');
        let rangeText = document.querySelector('.opacity-val');

        columns.forEach((column, index) => {
            column.style.opacity = opacityVal;
        });
        // usw. wie bisher

 

[Jan-Frederik Stieler]

Hi,
danke für Deine Hilfe.
Jo alles scheiß Anfänger Fehler. Dafür mach ich das eigentlich schon zu lange. Aber wenn ich dann mal wieder zwei Monate keinen Code angefasst hab …

Grüße