javascript addEventListener for click event calls the functions multiple times

Question

I have added an event Listener on click event for Html canvas element. The function statements gets executed multiple time. first time the statements execute once, when i call the main fnction again, the click causes same function to execute twice and then thrice and so on

Here is the listener

 function initializeNewGame() {

        // Set block 
        cur = new Date();
        countDownDate = new Date(cur.getTime() + 5*60010).getTime();
        moves = 0;
        BLOCK_WIDTH = Math.round(BLOCK_IMG_WIDTH / TOTAL_COLUMNS);
        BLOCK_HEIGHT = Math.round(BLOCK_IMG_HEIGHT / TOTAL_ROWS);

        document.getElementById("canJigsaw").addEventListener("click", myFunction);

        function myFunction() {
            moves = moves + 1;  

            } 

        SetImageBlock();

        DrawGame();
    }

Are you calling this block of code several times - it adds a new event handler every time. Make sure you only call the addEventListener bit once and once only — Jamiec
– Jamiec, Commented Aug 9, 2017 at 9:31
@Jamiec : it worked . i added a boolean to make sure the function if not called more than once. Thank you — yogas
– yogas, Commented Aug 10, 2017 at 5:46

Paul McBride · Accepted Answer · 2017-08-09 09:38:14Z

1

Make sure that initializeNewGame is only called once. Each time it is called, it will add another click handler. This means that myFunction could be called multiple times for each click.\

Try adding a console log in the initializeNewGame to help detect if its called more than once.

answered Aug 9, 2017 at 9:38

Paul McBride

3283 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript addEventListener for click event calls the functions multiple times

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related