需要由2次不同的点击触发2次点击事件监听器。 （JS）

Question

I'm currently trying to make a checkers game (with no AI) as something to help me learn JS and HTML events and animations. This is homework. Forgive me and point me in the right direction if this is something that has been answered elsewhere.

This is the relevant code for this problem:

canvas = document.getElementById('board');
        canvas.addEventListener('click', funcMovePiece);
function funcMovePiece(event)
    {
        var legalMove = false;
        var DXClick = 0;
        var DYClick = 0;
        var Drow = 0;
        var Dcol = 0;
        var pieceColor;
        //First Click
        var SXClick = event.pageX;
        var SYClick = event.pageY;
        var Scol = parseInt(SXClick / 100);
        var Srow = parseInt(SYClick / 100);

            canvas.addEventListener('click', funcGetSecondClick); 
            //Problem: First click gives me SX and SY, then skips this function. Browser finishes interpreting.
                    //Second click skips SX and SY (leaving them undefined) and triggers this function. Browser finishes interpreting.
            function funcGetSecondClick(event)
            {
                //Second Click
                DXClick = event.pageX;
                DYClick = event.pageY;
                Dcol = parseInt(DXClick / 100);
                Drow = parseInt(DYClick / 100);
            }

By col(umn) and row, I mean the column and row in an 8x8 2D array. The 2 sets of row and column variables will eventually be used as indexes for conditional statements. I can include the rest of my code if it is deemed relevant. I do have a jquery link called. The problem I am having is, once the first piece is clicked and the click event triggers, it is skipping the second click event altogether. My X and Y for the DXClick and DYClick are not being changed. If I click again, it re-interprets the program, goes into the second click event function, leaving SXClick and SYClick undefined. S stands for Source and indicates the first click, while D stands for destination and stands for the second click. My intent here is that someone can click on one checker piece, then click an empty red square. The program determines if it is a legal move or not and moves the piece (haven't gotten that far in the code yet).

Answer 1

canvas = document.getElementById('board');
canvas.addEventListener('click', funcMovePiece);
    function funcMovePiece(event)
        {
            var legalMove = false;
            var DXClick = 0;
            var DYClick = 0;
            var Drow = 0;
            var Dcol = 0;
            var pieceColor;
            //First Click
            var SXClick = event.pageX;
            var SYClick = event.pageY;
            var Scol = parseInt(SXClick / 100);
            var Srow = parseInt(SYClick / 100);
             alert('first click');

             canvas.removeEventListener('click', funcMovePiece); 
             canvas.addEventListener('click', funcGetSecondClick);              
        }

 function funcGetSecondClick(event)
                {
                    alert('second click');
                    DXClick = event.pageX;
                    DYClick = event.pageY;
                    Dcol = parseInt(DXClick / 100);
                    Drow = parseInt(DYClick / 100);                   

                    canvas.removeEventListener('click',funcGetSecondClick); 
                    canvas.addEventListener('click', funcMovePiece); 
                }