This forum uses cookies

papender · 24.11.2022, 18:38 - Wörter:

Hallo,

ich habe eine Frage. Ja klar, warum bin ich auch hier Smile

document.addEventListener('DOMContentLoaded', function () {
	
	class TestClass {
		constructor() {
			this.button = document.createElement('button');
		}
		
		methode1() {
			console.log('Hello World');
		}
		
		methode2() {
			this.button.addEventListener('click', function() {
				this.methode1();
			});
		}
		
		getButton() {
			return this.button;
		}
	}
	let tClass = new TestClass();
	tClass.methode2();
	let body = document.getElementsByTagName('body');
	body[0].appendChild(tClass.getButton());
	
});

Ich versuche mich gerade in die OOP mit JavaScript reinzudenken.
Ich möchte verschiedene Buttons mit unterschiedlichen Funktionen instanziieren. Wie bekomme ich es hin, dass ich durch den EventListener auf die Methode1 zugreifen kann. Ist das überhaupt ein denkbarer Weg?
Das ist erst einmal nur eine Testklasse zum ausprobieren.

Danke für eure Rückmeldungen.

***rzscout*** · 25.11.2022, 12:36 - Wörter:

Hi papender,
gerne gebe ich dir eine Rückmeldung. Für so etwas brauchst du nicht unbedingt OOP, aber trotzdem habe ich dir eine Version mit Klasse gebaut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OOP-JavaScript</title>
    <script>
        class Testklasse {
            constructor() {
                this.button = document.createElement('button');
                this.button.classList.add('btn');
            }
            create(id, myText, methode) {
                this.methode = methode;
                this.button.setAttribute('id', id);
                this.button.textContent = myText;
                this.button.addEventListener('click', ()=> {
                    switch(this.methode) {
                        case 'methode1':
                            this.methode1();
                        break;
                    }
                });
                return this.button;
            }
            methode1() {
                alert('Hallo Welt');
            }
        }
        document.addEventListener('DOMContentLoaded', init);
        function init() {
            let button = new Testklasse();
            let meinButton = button.create('myButton', 'Hallo Welt 123', 'methode1');
            document.body.appendChild(meinButton);            
        }
    </script>
</head>
<body>    
</body>
</html>

Viele Grüße

rzscout

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken