Use a var from mousedown() in the mouseup() event

Question

So to those who looked at my previous question, im building a chess board in complete JS and jQuery (or mostly at least).

So for my pieces to effectivly be restricted in the amount of squares they are allowed to move i need to know their position. (starting and ending position)

I wrote the code below to log the starting row (integer) and starting column (integer) and do that on both mousedown() and mouseup()

var piece;
        $('div').mousedown(function(e) {
            e.preventDefault();
            var selectedRow = this.getAttribute("data-row");
            var selectedColumn = this.getAttribute("data-column");
            console.log(selectedRow, selectedColumn);
            piece = $(this).find('.pawn');
        })
        .mouseup(function() {
            var selectedRow = this.getAttribute("data-row");
            var selectedColumn = this.getAttribute("data-column");
            console.log(selectedRow, selectedColumn);
            if (selectedRow === selectedRow++ || selectedColumn === selectedColumn++){
                console.log('TRUE :D'); //Wont be true because both selectedRow's will be the same value
            }
            $(this).append(piece);
        });

For as far as i can see i cant compare both values since both logs are in different events. (please keep in mind that im new to both languages and im still learning).

My question would be if its possible to collect both values (starting and ending) and then being able to compare them to each other.

So you say you use jQuery (and I can see that), but why aren't you using it for more things. For example `this.getAttribute("data-row")` could be `$(this).data('row');`. And yes you can compare them, you either need to move the variables out of the scope of the events or put them back into a `data` attribute. — putvande, Jan 21 '16 at 08:34
@putvande thats a neat thing to know, thanks! Like i said i'm still learning both languages. — Marco Geertsma, Jan 21 '16 at 08:35
@putvande Is there a reason why the integers returned in the console are different colors now? the one with $(this).data('row') is green while the others are yellow. Is there a reason for that? http://prntscr.com/9suizc — Marco Geertsma, Jan 21 '16 at 08:38
Might be the difference between one being converted to an actual integer and the other to a string (`1` and `'1'`), but i'm not sure. — putvande, Jan 21 '16 at 08:41
Can the person who downvoted this question elaborate on why they downvoted? Maybe i can improve my question? — Marco Geertsma, Jan 21 '16 at 09:08

score 2 · Accepted Answer · edited May 23 '17 at 12:23

The easiest approach is to make a selectedRow_down and selectedColumn_down selectedRow_up and selectedColumn_up in global scope.

var selectedRow_down;
var selectedColumn_down;
var selectedRow_up;
var selectedColumn_up;

$('div').mousedown(function(e) {
    e.preventDefault();
    var selectedRow_down = this.getAttribute("data-row");
    var selectedColumn_down = this.getAttribute("data-column");
    piece = $(this).find('.pawn');
})
.mouseup(function() {
    var selectedRow_up = this.getAttribute("data-row");
    var selectedColumn_up = this.getAttribute("data-column");
    console.log(selectedRow_up, selectedColumn_up);
    $(this).append(piece);
});

then refer to its value as you do your mouse event

also you could make global 2 dimensional array first so could keep track of your chess pieces, see this thread how to create 2d arrays How can I create a two dimensional array in JavaScript?

Use a var from mousedown() in the mouseup() event

1 Answers1