title: moving an element in JS
body: <p>I'm learning javascript and trying to make a simple exercise : I have a text box and want control it with keyboard.
  My HTML is the following (for now, I'm just trying 1 direction)</p>
  
  <pre><code>const myBox = document.querySelector("h1");
  document.addEventListener('keydown', function (event){
      if (event.keyCode == '38'){
          myBox.style.top -= 5;
          console.log("test if it works");
      }
  });
  </code></pre>
  
  <p>and my HTML is</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="fr"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Tuto&lt;/title&gt;
  
      &lt;style&gt;
          h1 {
              width: 200px;
              height: 40px;
              border: 5px solid #BADA55;
              color: #A28;
              margin: 0;
              text-align: center;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div&gt;&lt;h1&gt;My text&lt;/h1&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My check test with console log works. So event listener does.
  But my box doesn't move. How can I solve it and why my use of .style.top is incorrect ?</p>
  
  <p>Thank you</p>