How to move a circle in a div when you press the up / down \ left \ right buttons

Question

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

This only works for the left and down buttons, but this is not a very good way to use the field. Is there a way to change the position relative to the left \ right \ top \ down, and not the field?

(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 should make small 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 fields, you can better change the top and left css properties.

change: change if for switch

edit2: now does not go beyond 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 top and left and values ​​instead of marginTop and marginLeft as follows:

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'; } }) } }());