Highlight old move in chessboard.js

Question

I am looking to highlight the old move and the new move in chessboard.js, Basically anyone should know what the opponent has moved to and from which position.

Answer 1

Regardless of the backend chess engine you're using, I image you have access to the two coordinates, something like e2 and e4 source and target:

1. Define a CSS class for highlighting a square
2. Remove 'highlight' class from any other square
3. Find the square on of the source or target of move
4. Add highlight class to the target or source square

The docs have a great example (with jquery): http://chessboardjs.com/examples#5004

Otherwise, here is the code for highlighting the square an player moves onto in vanilla Javascript

First define the CSS, see the chess stackexchange for a more complete example: https://chess.stackexchange.com/questions/15265/how-to-highlight-current-and-previous-move-of-the-player-in-chessboard-js:

.highlight {
   -webkit-box-shadow: inset 0 0 3px 3px green;
   -moz-box-shadow: inset 0 0 3px 3px green;
   box-shadow: inset 0 0 3px 3px green;
}

So, for example, clear all the other highlights you've done (see Remove CSS class from element with JavaScript (no jQuery)):

     var hl = document.getElementsByClassName("highlight");
     if (hl[0] != undefined) { 
       hl[0].className = hl[0].className.replace(/\bhighlight\b/g,'');
     }

and find the square which a player moves onto and add the highlight class:

     // I'm assuming you have a data object with target field
     var sq = document.getElementsByClassName("square-" + data.target);
     sq[0].className += " highlight"; // Remember to add a space before

There is a bit more code to write in order to implement the source square, and differentiate Black and White; but it'll be along these lines.