Is there a better way to call and place this click handler function?

Refresh

April 2019

Views

20 time

1

I have a draw function whose purpose is to provide elements' movements and interactivity. In this function, I place an Event Listener for clicks.

enter image description here

How is supposed to work this Event Listener?

When pushed, the event listener gets the x and y values of the point where it was clicked, and, the elements (circles) 100 pixels far from the clicked point change their color to white.

Although it works, it only considers the first elements of the array. I tried to see if it was because of the counter initialization, but it seems it's not.

Note: I am using an array called "strip[]".

//7.EVENT LISTENER- 

rect.node.addEventListener('click', function(ev) {
    mouseState = true;
    console.log("Got you!");
    counter = 0;
    counter++;

    //Determine the distance beetween two points with simple equation:         
    dist = distance(ev.offsetX, ev.offsetY, strip[counter].xpos, strip[counter].ypos);

    //SHOW DISTANCE   
    console.log("bombayah! " + dist);
    console.log("disk:" + counter);

    //7. PRINT THE MESSAGE  AND CHANGE COLOR  
    if (dist > 100) {
        console.log(">100- MAYOR");
        strip[counter].attr({
            "fill": "white",
            "stroke-width": 0
        });
    }
    if (dist < 100 || mouseState != true) {
        console.log("<100 MENOR");
        strip[counter].attr({
            "fill": colorString,
            "stroke-width": 0
        });
    }
    //******************************************* 
});

rect.node.addEventListener('mouseup', function(ev) {
    mouseState = false;
    console.log("Up!")
});

0 answers