How to move circle in a div when clicking the buttons up\down\left\right

Question

I need to move the circle by clicking the buttons. and the circle should not go far from the border.

This works just to button left and down, but it's not a good way to use the margin. there is a way to change the position relative left\right\top\down and not the margin ?

(function(){

    var button = document.getElementsByClassName("button");
    var circle = document.getElementById("circle");


    var down=0, up=0, left=0, right=0;

    for (var i = 0; i < button.length; i++) {
        button[i].addEventListener('click',function(e){
                var position = e.currentTarget.value;
            if(position==="down"){
                down+=5;
                circle.style.marginTop = down +"px";
            }
            if(position==="up"){
                up+=5;
                circle.style.marginBottom = up+'px';
            }
            if(position==="left"){
                left+=5;
                circle.style.marginRight = left+'px';
            }
            if(position==="right"){
                right+=5;
                circle.style.marginLeft = right+'px';
            }

            }
        )
    }


    }());

html, body {
  font-size: 62.5%;
}

.border{
  position: relative;
  overflow: hidden;
  float: left;
  width: 70% ;
  height: 50rem;
  border: 1rem black solid;
  margin-right: 1rem;
}

.sidebar{
  position: relative;
  float: left;
  border: 1rem black solid;
  width: 25% ;
  height: 50rem;
}

.buttons{
  position: relative;
  width: 25rem;
  height: 21rem;
  top: 9rem;
  left: 4rem;
}

.button{
  position: absolute;
  width: 7rem;
  height: 7rem;
}

.arrow{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.arrow-up{
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 16px solid black;
}

.arrow-right{
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 16px solid black;
}

.arrow-left{
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right:16px solid black;
}

.arrow-down{
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 16px solid black;
}

.down{
  bottom: 0;
  left: 9rem;
}

.left{
  top: 7rem;
  left: 0;
}


.right{
  top: 7rem;
  right: 0;
}

.up{
  top: 0;
  left: 9rem;
}

.reset{
  position: relative;
  top: 12rem;
  width: 10rem;
  height: 4rem;
  left: 12rem;
}

#circle{
  position: relative;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background:blue;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="border">

    <div id="circle"></div>

</div>

<div class="sidebar">

    <div class="buttons">
        <button class="button up"  value="up"><span class="arrow-up arrow"></span></button>
        <button class="button down"  value="down"><span class="arrow-down arrow"></span></button>
        <button class="button right"  value="right"><span class="arrow-right arrow"></span></button>
        <button class="button left"  value="left"><span class="arrow-left arrow"></span></button>
    </div>

    <button class="reset">Reset</button>

</div>

Answer 1

You have to make little changes to your javascript code:

    (function(){

    var button = document.getElementsByClassName("button");
    var circle = document.getElementById("circle");

    var top=50, left=50, perStep = 2;

    for (var i = 0; i < button.length; i++) {
        button[i].addEventListener('click',function(e){

            var position = e.currentTarget.value;

            switch(position){
                case "up": top-=perStep; break;
                case "down": top+=perStep; break;
                case "left": left-=perStep; break;
                case "right": left+=perStep; break;
            }

            if(top < 0)
                top = 0;
            if(top > 100)
                top = 100;

            if(left < 0)
                left = 0;
            if(left > 100)
                left = 100;

            circle.style.top = top+'%';
            circle.style.left = left+'%';
        });
    }

}());

Instead of changing margins, you could better change the top and left css properties.

edit: changed if statements for switch

edit2: now not going out of borders

Answer 2

JS Fiddle

JS:

(function() {
  var button = document.getElementsByClassName("button");
  var circle = document.getElementById("circle");
  var down = 0,
    up = 0,
    left = 0,
    right = 0;

  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
      var position = e.currentTarget.value;

      // for bottom and top, use marginTop, but for one increase by 5
      // and for the other decrease by 5
      if (position === "down") {
        down += 5;
        circle.style.marginTop = down + "px";
      }
      if (position == "up") {
        up -= 5;
        circle.style.marginTop = up + 'px';
      }
      // same thing for left and right, use marginLeft, but for one increase by 5
      // and for the other decrease by 5
      if (position == "left") {
        left -= 5;
        circle.style.marginLeft = left + 'px';
      }
      if (position == "right") {
        left += 5;
        circle.style.marginLeft = left + 'px';
      }
    })
  }
}());

---

UPDATE

Alternatively you can move the top and left and values instead of marginTop and marginLeft as this:

JS Fiddle 2

(function() {

  var button = document.getElementsByClassName("button");
  var circle = document.getElementById("circle");


  var posTop = circle.offsetTop,
    posLeft = circle.offsetLeft;

  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
      var position = e.currentTarget.value;
      if (position === "down") {
        posTop += 5;
        circle.style.top = posTop + "px";
      }
      if (position == "up") {
        posTop -= 5;
        circle.style.top = posTop + 'px';
      }
      if (position == "left") {
        posLeft -= 5;
        circle.style.left = posLeft + 'px';
      }
      if (position == "right") {
        posLeft += 5;
        circle.style.left = posLeft + 'px';
      }

    })
  }
}());