如何在类EcmaScript6中使用addEventListener？

Question

I use EcmaScript6 and don't know how to apply addEventListener in a Class. I tried declaring a var out of the Class to call the method EventListener and got an Error :/. I also tried addEventlistener inside of the Class and I can't.

The errors in console, is because I'm try again new alternate.

Don't know solution problem. how add the event listener ?

<!-- language: lang-js -->
class Design{
transition(clickea, up, down){
    this.clickea = clickea;
    this.up = up;
    this.down = down;
    let cont = 0;
    let focus = document.getElementById(clickea);
    let content = document.getElementById(up);
    let content2 = document.getElementById(down);
    if(cont == 0){
        content.style.transform = "translateY(-1000%)";
        content2.style.transform = "translateY(0%)";
        cont++;
    }else{
        content.style.transform = "translateY(0%)";
        content2.style.transform = "translateY(-100%)";
        cont--;
    }
}
}

const design = new Design();
let enlance = document.getElementById('sign');
enlance.addEventListener('click', desgin.transition(enlance, loguin, 
registro));

Google console

eventos.js:11 Uncaught TypeError: Cannot read property 'style' of null
at Design.transition (eventos.js:11)
at eventos.js:24

or

<!-- language: lang-js -->
class Design{
transition(clickea, up, down){
    this.clickea = clickea;
    this.up = up;
    this.down = down;
    let cont = 0;
    let focus = document.getElementById(clickea);
    let content = document.getElementById(up);
    let content2 = document.getElementById(down);
    focus.addEventListener('click', function(up,down){
        if(cont == 0){
            content.style.transform = "translateY(-1000%)";
            content2.style.transform = "translateY(0%)";
            cont++;
        }else{
            content.style.transform = "translateY(0%)";
            content2.style.transform = "translateY(-100%)";
            cont--;
        }
    });

}

}

const diseño = new Design();
let enlance = document.getElementById('sign');
let loguin = document.getElementById('loguin');
let registro = document.getElementById('registro');
diseño.transition(enlance, loguin, registro);


eventos.js:10 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at Design.transition (eventos.js:10)
    at eventos.js:29
transition @ eventos.js:10

My question is, how i can use listener in the template method Class.

Answer 1

Welcome to Stackoverflow!

It looks like you're seeing this error because your class is expecting a string, but you're providing a DOM chunk.

Your code is essentially doing this...

document.getElementById(document.getElementById('sign'));

If you just provide strings to transition() you should be good.

Regarding your actual question

How can I use addEventListener in Class EcmaScript6?

A class is really no different than a function, its just a way to store data/functionality. You can have a method on the class that gets a piece of DOM or a adds a listener to a piece of DOM, but you can't put a listener directly on the class. As it sits right now, it doesn't look like you are even trying to do that though. Your class simply stores some logic and procedural DOM code which is totally valid.