Navigate through grid with arrow keys

by Tan

HTML

<div id="row">1</div>
<div id="col">1</div>
<div id="direction">N</div>

<button onclick="move('l')">LEFT</button>
<button onclick="move('r')">RIGHT</button>
<button onclick="fwd()">FORWARD</button>

JavaScript

var row = 1;
var col = 1;
direction = "N";

var position = [1,1, "N"];

function move(x) {

if (direction === "N") { var left = "W"; var right = "E"; }
if (direction === "E") { var left = "N"; var right = "S"; }
if (direction === "S") { var left = "E"; var right = "W"; }
if (direction === "W") { var left = "S"; var right = "N"; }

if (x === "l") {
direction = left;
} else {direction = right;}

document.getElementById('direction').innerHTML = direction;
}

function fwd(x) {

if (direction === "N") { row = (row + 1); }
if (direction === "E") { col = (col + 1); }
if (direction === "S") { row = (row - 1); }
if (direction === "W") { col = (col - 1); }

if (row < 1) {row = 1;}
if (col < 1) {col = 1;}

document.getElementById('row').innerHTML = row;
document.getElementById('col').innerHTML = col;
}