Manipulating element's location with keys on keyboard

Question

So am trying to move an element with the directional pad on my keyboard. It moves, but once I switch direction (horizontal || vertical) it reestablishes the previous directions original location on program load. So if the element starts at margin-top & margin-left at 100px once the element has been moved say horizontally leaving coordinates now as MT = 100px & ML = 150px once I switch to vertical the elements ML becomes 100. This is not what I want to have happen, what I'd like is for the elements ML & MT to be representative of it's prior manipulations. Move from 100&100 to 150&100 and then to 150&150. Plus no library's, straight JS.

var spacePos = 5;
var spaceNeg = -5;
var output;
var marginLeft =1;
var marginTop =1;

function init(){
 output = document.getElementById('output');
 document.onkeydown = updateKeys;
}

updateKeys = function(e){
  currentKey = e.keyCode;
  output.innerHTML = "current key: " + currentKey;
  if (currentKey=='39') {        
      marginLeft = marginLeft + spacePos;
      document.getElementById('blockB').style='margin-left:' + marginLeft +'px';
  }
  else if (currentKey=='37') {
      marginLeft = marginLeft + spaceNeg;
      document.getElementById('blockB').style='margin-left:' + marginLeft +'px';
  }
  else if (currentKey=='38') {    
      marginTop = marginTop + spaceNeg;
      document.getElementById('blockB').style='margin-top:' + marginTop +'px';
  }
  else if (currentKey=='40') {    
      marginTop = marginTop + spacePos;
      document.getElementById('blockB').style='margin-top:' + marginTop +'px';
  }
}
K_LEFT = 37;
K_RIGHT = 39;
K_UP = 38;
K_DOWN = 40;

#blockB{
    width:10px;
    height:10px;
    margin-top:100px;
    margin-left:100px;
    position:absolute; 
    background-color: blue;       
}

<body onload='init()'>
   <div id='output'> </div>
   <div id='blockB'> </div>    
</body>

score 0 · Accepted Answer · answered Jan 18 '19 at 18:54

basically your problem is that you are just setting the margin-left or margin-right when using the arrows, that is wrong because:

start with top 100 and left 100.

if you move from left to right, you only set margin-left, lets say you moved 100 units, your new left is 200. style { margin-left: 200px }
if you start moving from top to bottom, setting only margin-top lets say 50 units, your new top is 150. style { margin-top: 150px } (using as default value your initial value left=100

but you are not taking into account that you need to set both of them so the item always have a track from top and bottom.

also note that you are setting the style inside each if, you cand do the calculations and then set the values at the end.

another note, start using let and const, your code will become a mess if you continue like this.

var spacePos = 5;
var spaceNeg = -5;
var output;
var marginLeft = 100;
var marginTop = 100;

function init() {
  output = document.getElementById('output');
  document.onkeydown = updateKeys;

}
updateKeys = function(e) {
  currentKey = e.keyCode;
  output.innerHTML = "current key: " + currentKey;
  if (currentKey == '39') {
    marginLeft = marginLeft + spacePos;
  } else if (currentKey == '37') {
    marginLeft = marginLeft + spaceNeg;
  } else if (currentKey == '38') {
    marginTop = marginTop + spaceNeg;
  } else if (currentKey == '40') {
    marginTop = marginTop + spacePos;
  }
  document.getElementById('blockB').style = 'margin:' + marginTop + 'px ' + marginLeft +
    'px';
}
K_LEFT = 37;
K_RIGHT = 39;
K_UP = 38;
K_DOWN = 40;

<script>
</script>

<body onload='init()'>
  <div id='output'> </div>
  <div id='blockB'> </div>
</body>
<style>
  #blockB {
    width: 10px;
    height: 10px;
    margin-top: 100px;
    margin-left: 100px;
    position: absolute;
    background-color: blue;
  }
</style>

Could you give a example in this code where let and const would be useful? — Michael, Feb 03 '19 at 18:21
@Michael for that you should check: https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable-in-jav basically, the problem is the growing of your project, handling all the vars will be a pain, it is to better to have a closed scope for each variable and whne you want a global, you can define it properly. — Prince Hernandez, Feb 03 '19 at 23:10

Manipulating element's location with keys on keyboard

1 Answers1