This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Zugriff auf andere Methode über EventListener
#1
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.
Zitieren
#2
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste