Moving a rectangle up down left and right-CodePudding

I wanted to make a rectangle move in 4 directions with a click of a button on JavaScript. Only the Right and Down works and the other two does not work. I tried finding it on internet and so far had not have any luck.

var currentXpos = 0;

function moveRectRight() {
  var rect = document.getElementById('rectangle');
  currentXpos  = 100; // move by 100 px to the right
  rect.style.marginLeft = currentXpos   'px'; // re-draw rectangle
}

function moveRectLeft() {
  var rect = document.getElementById('rectangle');
  currentXpos  = 100; // move by 100 px to the right
  rect.style.marginRight = currentXpos   'px'; // re-draw rectangle
}

function moveRectUp() {
  var rect = document.getElementById('rectangle');
  currentXpos  = 100; // move by 100 px to the right
  rect.style.marginBottom = currentXpos   'px'; // re-draw rectangle
}

function moveRectDown() {
  var rect = document.getElementById('rectangle');
  currentXpos  = 100; // move by 100 px to the right
  rect.style.marginTop = currentXpos   'px'; // re-draw rectangle
}

#rectangle {
  background-color: red;
  width: 200px;
  height: 100px;
  margin-left: 0px;
}

<div id='rectangle'></div>
<input type="button" value="Right" onclick="moveRectRight()" />
<input type="button" value="Left" onclick="moveRectLeft()" />
<input type="button" value="Up" onclick="moveRectUp()" />
<input type="button" value="Down" onclick="moveRectDown()" />

CodePudding user response：

Your problem lies on this code


function moveRectLeft() {
 var rect = document.getElementById('rectangle');
 currentXpos  = 100; // move by 100 px to the right
 rect.style.marginRight = currentXpos   'px'; // re-draw rectangle
}

function moveRectUp() {
 var rect = document.getElementById('rectangle');
 currentXpos  = 100; // move by 100 px to the right
 rect.style.marginBottom = currentXpos   'px'; // re-draw rectangle
}

when you move left you tried to add the margin right and when you move up you add margin bottom. This is a wrong concept, you shouldn't imagine it like the box is being pushed from 4 side like this image

When you code in HTML & CSS, try to imagine that in coordinate, the 0,0 (x and y) is on your upper left corner of browser, and to move them you can only move them away or closer to the 0,0, like below

I suggest you to learn/debug using the developer tools you can see where it goes wrong,

So the answer is just changing the code to marginLeft and marginTop

That aside, I made my own version maybe you want to check it out

<html>

<head>
  <style>
    #rectangle {
      background-color: red;
      width: 200px;
      height: 100px;
      position: fixed;
    }
  </style>
</head>

<body>
  <div id='rectangle' style="top:100px;left:100px;"></div>
  <input type="button" value="Right" onclick="moveRect(this)" />
  <input type="button" value="Left" onclick="moveRect(this)" />
  <input type="button" value="Up" onclick="moveRect(this)" />
  <input type="button" value="Down" onclick="moveRect(this)" />
  <script>
    const distance = 10;
    const directionMap = {
      'Up': {
        'prop': 'top',
        'value': -1
      },
      'Down': {
        'prop': 'top',
        'value': 1
      },
      'Left': {
        'prop': 'left',
        'value': -1
      },
      'Right': {
        'prop': 'left',
        'value': 1
      },
    }

    const parsePosition = (prop) => parseFloat(rectangle.style[prop]) || 0;

    const moveRect = (element) => {
      let {
        prop,
        value
      } = directionMap[element.value];
      rectangle.style[prop] = (parsePosition(prop)   (value * distance))   "px";
    }
  </script>
</body>

</html>

CodePudding user response：

Because margins in the HTML, depend on having a neightbor. So, you'll not see margin-right and margin-bottom working, hence you'll not see the box going up or left.

Instead, what you can do, is affect the same property with addition and substraction. For Y affect only margin-top and for X affect only margin-left

CSS Documentation

<html>

<head>
  <style>
    #rectangle {
      background-color: red;
      width: 200px;
      height: 100px;
      margin-left: 0px;
    }
  </style>

</head>

<body>
    <div id='rectangle'>
    </div>
  <input type="button" value="Right" onclick="moveRectRight()" />
  <input type="button" value="Left" onclick="moveRectLeft()" />
  <input type="button" value="Up" onclick="moveRectUp()" />
  <input type="button" value="Down" onclick="moveRectDown()" />
  <script>
    var currentXpos = 0;
    function moveRectRight() {
      var rect = document.getElementById('rectangle');
      console.log(rect)
      currentXpos  = 100; // move by 100 px to the right
      rect.style.marginLeft = currentXpos   'px'; // re-draw rectangle
    }
    function moveRectLeft() {
      var rect = document.getElementById('rectangle');
      currentXpos -= 100; // move by 100 px to the right
      rect.style.marginLeft = currentXpos   'px'; // re-draw rectangle
    }
    function moveRectUp() {
      var rect = document.getElementById('rectangle');
      currentXpos -= 100; // move by 100 px to the right
      rect.style.marginTop = currentXpos   'px'; // re-draw rectangle
    }
    function moveRectDown() {
      var rect = document.getElementById('rectangle');
      currentXpos  = 100; // move by 100 px to the right
      rect.style.marginTop = currentXpos   'px'; // re-draw rectangle
    }

  </script>
</body>

</html>

CodePudding user response：

Thremulant gave a very good solution but there was something missed something the "current position" variable should be different for X and Y axis. This way it will not show abnormal behaviour.

<html>
<head>
<style>
#rectangle {
  background-color: red;
  width: 200px;
  height: 100px;
  margin-left: 0px;
}
</style>
<script>
var currentXpos = 0;
var currentYpos = 0;

function moveRectRight() {
  var rect = document.getElementById('rectangle');
  currentXpos  = 100; // move by 100 px to the right
  rect.style.marginLeft = currentXpos   'px'; // re-draw rectangle
}

function moveRectLeft() {
  var rect = document.getElementById('rectangle');
  currentXpos -= 100; // move by 100 px to the right
  rect.style.marginLeft = currentXpos   'px'; // re-draw rectangle
}

function moveRectUp() {
  var rect = document.getElementById('rectangle');
  currentYpos -= 100; // move by 100 px to the right
  rect.style.marginTop = currentYpos   'px'; // re-draw rectangle
}

function moveRectDown() {
  var rect = document.getElementById('rectangle');
  currentYpos  = 100; // move by 100 px to the right
  rect.style.marginTop = currentYpos   'px'; // re-draw rectangle
}
</script>
</head>
<body>
<div id='rectangle'></div>
<input type="button" value="Right" onclick="moveRectRight()" />
<input type="button" value="Left" onclick="moveRectLeft()" />
<input type="button" value="Up" onclick="moveRectUp()" />
<input type="button" value="Down" onclick="moveRectDown()" />
</body>
</html>