So I wanted to make a box move in all directions by multiplying the box then getting rid of the bottom half. Up and right works, but the down and left don't. The functions are called on the click of 1 of 4 buttons. Basic CSS and html. How would I fix this?

var box = document.getElementById("box");
var container = document.getElementById("container");
var time = document.getElementById("time");
let up2 = 1;
let right2 = 1;
let left2 = 1;
let down2 = 1;

function up() {
  box.style.height = 30 + "px";
  box.style.bottom = 30 * up2 + "px";
  up2++;
}

function right() {
  box.style.right = 30 + "px";
  box.style.left = 30 * right2 + "px";
  right2++;
}

function left() {
  box.style.left = 30 + "px";
  box.style.right = 30 * left2 + "px";
  left2++;
}

function down() {
  box.style.bottom = 30 + "px";
  box.style.top = 30 * down2 + "px";
  down2++;
}

#container {
  position: relative;
  background: purple;
  width: 400px;
  height: 400px;
}

#box {
  position: absolute;
  background: red;
  width: 30px;
  height: 30px;
  bottom: 0px;
}

<div id="container">
  <div id="box"></div>
</div>

<br />
<button class="up" onclick="up()">↑</button>

<br />

<button class="right" onclick="left()">←</button>

<button class="left" onclick="right()">→</button>

<br />

<button class="down" onclick="down()">↓</button>

So I wanted to make a box move in all directions by multiplying the box then getting rid of the bottom half. Up and right works, but the down and left don't. The functions are called on the click of 1 of 4 buttons. Basic CSS and html. How would I fix this?

var box = document.getElementById("box");
var container = document.getElementById("container");
var time = document.getElementById("time");
let up2 = 1;
let right2 = 1;
let left2 = 1;
let down2 = 1;

function up() {
  box.style.height = 30 + "px";
  box.style.bottom = 30 * up2 + "px";
  up2++;
}

function right() {
  box.style.right = 30 + "px";
  box.style.left = 30 * right2 + "px";
  right2++;
}

function left() {
  box.style.left = 30 + "px";
  box.style.right = 30 * left2 + "px";
  left2++;
}

function down() {
  box.style.bottom = 30 + "px";
  box.style.top = 30 * down2 + "px";
  down2++;
}

#container {
  position: relative;
  background: purple;
  width: 400px;
  height: 400px;
}

#box {
  position: absolute;
  background: red;
  width: 30px;
  height: 30px;
  bottom: 0px;
}

<div id="container">
  <div id="box"></div>
</div>

<br />
<button class="up" onclick="up()">↑</button>

<br />

<button class="right" onclick="left()">←</button>

<button class="left" onclick="right()">→</button>

<br />

<button class="down" onclick="down()">↓</button>

• javascript

• 2 It would be much easier to help if we had a minimal reproducible example to see where you're going wrong. Stack Snippets (icon in the editor looks like <> in a page) can help. – Heretic Monkey Commented Nov 17, 2019 at 14:27
• What do you mean – avisk Commented Nov 17, 2019 at 14:31
• 1 Post a code snippet. Look at the toolbar in the editor. – Thanh Trung Commented Nov 17, 2019 at 14:36
• That is a code snippet, is it not? – avisk Commented Nov 17, 2019 at 14:40
• As already noted a code snipped would help. But instead of providing both left/right and top/bottom values why not just use left and top and decrease your variables (-- instead of ++). – Ood Commented Nov 17, 2019 at 15:39

2 Answers 2

Now all that's left to do is limit the values to the size of the container ;-).

var box = document.getElementById("box");

function up() {
  box.style.top = (parseInt(box.style.top) - 30) + 'px';
}

function right() {
  box.style.left = (parseInt(box.style.left) + 30) + 'px';
}

function left() {
  box.style.left = (parseInt(box.style.left) - 30) + 'px';
}

function down() {
  box.style.top = (parseInt(box.style.top) + 30) + 'px';
}

#container {
  position: relative;
  background: purple;
  width: 400px;
  height: 400px;
}

#box {
  position: absolute;
  background: red;
  width: 30px;
  height: 30px;
}

<br />
<button class="up" onclick="up()">↑</button>

<br />

<button class="right" onclick="left()">←</button>

<button class="left" onclick="right()">→</button>

<br />

<button class="down" onclick="down()">↓</button>

<br/>

<div id="container">
  <div id="box" style="top: 0px; left: 0px;"></div>
</div>

Here you can see another example..

class box{
 constructor() {  
   this.box = document.getElementById("box");
   this.container = document.getElementById("container");
   this.y = 1;
   this.x = 1;
 }
draw(){
  this.box.style.top = this.y + "px";
  this.box.style.left = this.x + "px";
}
up() {
  this.y += -30;
  this.draw()
}
 right() {
 this.x += 30;
    this.draw()
}
 left() {
   this.x += -30;
    this.draw()
 
}
  down() {
    this.y += 30;  
     this.draw()
  }
}

 var box2 = new box();


box2.draw()

#container {
  position: relative;
  background: purple;
  width: 400px;
  height: 400px;
}

#box {
  position: absolute;
  background: red;
  width: 30px;
  height: 30px;
  bottom: 0px;
}

 
  <div id="container">
  <div id="box"></div>
</div>

<br />
<button class="up" onclick="box2.up.call(box2)">↑</button>

<br />

<button class="right" onclick="box2.left.call(box2)">←</button>

<button class="left" onclick="box2.right.call(box2)">→</button>

<br />

<button class="down" onclick="box2.down.call(box2)">↓</button>