Making it better

A good design principle is to make sure something always happens when a player clicks on something. At the moment, that first click ignores that principle.

So here's my plan:

function piece_clicked(el) {
  if (g_piece=='') {
    g_piece=el;
    g_piece.classList.add('highlight');
  } else if (g_piece==el) {
    g_piece.classList.remove('highlight');
    g_piece='';
  } else {
    // swap
    var r=el.style.gridRowStart;
    var c=el.style.gridColumnStart;
    el.style.gridRowStart= g_piece.style.gridRowStart;
    el.style.gridColumnStart= g_piece.style.gridColumnStart;
    g_piece.style.gridRowStart=r;
    g_piece.style.gridColumnStart=c;
    g_piece.classList.remove('highlight');
    g_piece='';
  }
}

Now I'm free to highlight that first click by simply creating a highlight class. This was my first attempt:

.highlight {
  border:5px solid blue;
}

It's important you try this for yourself and see why it's not totally satisfactory.