Trouble getting this box to move in JavaScript
<p>I'm trying to get a box to move when I press the arrow keys. I found <a href="http://stackoverflow.com/questions/4950575/how-to-move-a-div-with-arrow-keys">this</a> solution and tried to copy it in, but it still doesn't work (the top answer by Sime Vidas). </p>

<p>My Jquery file is definitely in the same folder, and everything else is just copied and pasted from the solution (which works in the JSFiddle demo). So I suppose it's not the HTML, CSS or JavaScript that's the problem but I've made some mistake putting it all together.</p>

<p>The box appears, but doesn't move. Why isn't it working?</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#pane {
    position:relative;
    width:300px; height:300px;
    border:2px solid red;
}  

#box {
    position:absolute; top:140px; left:140px;
    width:20px; height:20px;          
    background-color:black;
}
&lt;/style&gt;

&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
var pane = $('#pane'),
    box = $('#box'),
    maxValue = pane.width() - box.width(),
    keysPressed = {},
    distancePerIteration = 3;

function calculateNewValue(oldValue, keyCode1, keyCode2) {
    var newValue = parseInt(oldValue, 10)
                   - (keysPressed[keyCode1] ? distancePerIteration : 0)
                   + (keysPressed[keyCode2] ? distancePerIteration : 0);
       return newValue &lt; 0 ? 0 : newValue &gt; maxValue ? maxValue : newValue;
}

$(window).keydown(function(event) { keysPressed[event.which] = true; });
$(window).keyup(function(event) { keysPressed[event.which] = false; });

    setInterval(function() {
    box.css({
        left: function(index ,oldValue) {
            return calculateNewValue(oldValue, 37, 39);
        },
        top: function(index, oldValue) {
            return calculateNewValue(oldValue, 38, 40);
        }
    });
}, 20);

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="pane"&gt;
    &lt;div id="box"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>
