Estoy tratando de mover el botón a través del cuerpo usando flechas. Está mal poner literales numéricos, y probé que el código está vinculado al HTML.
document.body.addEventListener("keydown", function (evt) { const btn = document.querySelector('button'); switch(evt.code) { case 'ArrowUp': btn.style.marginBottom =+ 10; break; case 'ArrowDown': btn.style.marginTop =+ 10; break; case 'ArrowRight': btn.style.marginLeft += 10; break; case 'ArrowLeft': btn.style.marginRight =+ 10; break; default: } })marginLeft y otros devuelven una cadena (con el texto "px"), por lo que debe eliminarla para hacer la suma.
document.body.addEventListener("keydown", function (evt) { const btn = document.querySelector('#mybutton'); switch(evt.code) { case 'ArrowUp': btn.style.marginTop = (parseInt(btn.style.marginTop.replace("px","")) - 10) + "px"; break; case 'ArrowDown': btn.style.marginTop = (parseInt(btn.style.marginTop.replace("px","")) + 10) + "px"; break; case 'ArrowRight': btn.style.marginLeft = (parseInt(btn.style.marginLeft.replace("px","")) + 10) + "px"; break; case 'ArrowLeft': btn.style.marginLeft = (parseInt(btn.style.marginLeft.replace("px","")) - 10) + "px"; break; default: } }) <div>before</div> <button id="mybutton" style="margin:1px">hello</button> <div>after</div>