0

I am writting a online diagram editing tool and i created a function to set up the event listener which i call in my init function. I try to add many breakpoint to see where the problem comes from and it seems like the addactionlistener function call the function which is in parameter without the action event happened.

init(){
        console.log("Website started");
        myObj = new Draw();
        setUpEventListener();   
    }
    
    gates = {
        or_gate: '#or_gate',
        and_gate: '#and_gate',
        not_gate: '#not_gate'
    }

    shapes = {
        or_gate: '#or_gate_shape',
        and_gate: '#and_gate_shape',
        not_gate: '#not_gate_shape'
    }

    setUpEventListener(){
        document.querySelector('#OrCloneBtn').addEventListener('click', this.ctrlGateSVG(this.gates.or_gate, this.shapes.or_gate));
        document.querySelector('#AndCloneBtn').addEventListener('click', this.ctrlGateSVG(this.gates.and_gate, this.shapes.and_gate));
        document.querySelector('#NotCloneBtn').addEventListener('click', console.log("mathieu"));
    }
    basicAttr = {
        "fill" : "#FFF",
        "stroke" : "black",
        "strokeWidth" : 1
    }
    ctrlGateSVG(gate, shape){
        var to = Snap('#gates');
        var from = Snap(gate);
        var shape = from.select(shape);
        var clone = shape.clone();
        clone.attr(this.basicAttr);
        to.append(clone);
        console.log("clicked")
    }
    

    drawCanvas() {
        var lines = Snap("#lineBackground");
        var height = document.querySelector('.drawPart').clientHeight;
        var width = document.querySelector('.drawPart').clientWidth;
        for(var i=0; i < height; i = i+2){
            lines.line(i, 0, i, height).attr({
            stroke:'black',
            strokeWidth:.2,
        });
        }
        for(i=0; i<width; i=i+2){
            lines.line(0, i, width, i).attr({
                stroke:'black',
                strokeWidth:.2
            });
        }
    }
    init(){
        console.log("Website started");
        var myObj = new Draw();
        this.drawCanvas();
        this.setUpEventListener();  
    }
}

myApp = new DrawingCanvas();
myApp.init();

please can you explain me what is the problem here because i am really confused.

  • I forgot to say that this code is inside a class : ```class DrawingCanvas extends Draw {``` – mathfia Oct 29 '20 at 15:27
  • `document.querySelector('#OrCloneBtn').addEventListener('click', this.ctrlGateSVG(this.gates.or_gate, this.shapes.or_gate));` **calls** `this.ctrlGateSVG` and passes its return value into ``document.querySelector('#OrCloneBtn').addEventListener`, exactly the way `foo(bar())` **calls** `bar` and passes its return value into `foo`. See the linked questions' answers for what to do, but for example, you could wrap those in functions: `document.querySelector('#OrCloneBtn').addEventListener('click', () => this.ctrlGateSVG(this.gates.or_gate, this.shapes.or_gate));` – T.J. Crowder Oct 29 '20 at 15:30

0 Answers0