How can I improve my program to avoid shaking the box

Question

I can't eliminate shaking of the box which is predict to displace by using upper buttons. What can I do to avoid the shaking? I want to control the red box by buttons placed above, so what can I do to obtain no shaking of the box? How to improve my code to and not to use setInterval command which as I suppose is main cause of shaking.

I was trying to solve the problem but nothing was coming out from this. I want to obtain smooth movement of the box using buttons.

const pluss = document.querySelector(".box");
const moveY = document.querySelector(".move-y");
const moveX = document.querySelector(".move-x");
const movexP = document.querySelector(".move-xp");
const moveyM = document.querySelector(".move-ym");
const ccol = document.querySelector(".change-color");
let counterx = 940;
let countery = 460;
let sizex = 20;
let sizey = 20;
ccol.addEventListener("click", function() {
  pluss.style.backgroundColor = `hsl(${Math.random() * 360}, 90%, 70%)`
});
moveX.addEventListener("mousedown", function() {
  setInterval(() => {
    counterx++;
    pluss.style.left = counterx + "px"
  }, 1)
});
moveX.addEventListener("mouseup", function() {
  setInterval(() => {
    counterx--;
    pluss.style.left = counterx + "px";
  }, 1)
});
moveY.addEventListener("mousedown", function() {
  setInterval(() => {
    countery++;
    pluss.style.top = countery + "px";
  }, 1)
})
moveY.addEventListener("mouseup", function() {
  setInterval(() => {
    countery--;
    pluss.style.top = countery + "px";
  }, 1)
})
movexP.addEventListener("mousedown", function() {
  setInterval(() => {
    counterx--;
    pluss.style.left = counterx + "px";
  }, 1)
})
movexP.addEventListener("mouseup", function() {
  setInterval(() => {
    counterx++;
    pluss.style.left = counterx + "px";
  }, 1)
})
moveyM.addEventListener("mousedown", function() {
  setInterval(() => {
    countery--;
    pluss.style.top = countery + "px";
  }, 1)
})
moveyM.addEventListener("mouseup", function() {
  setInterval(() => {
    countery++;
    pluss.style.top = countery + "px";
  }, 1)
})

function sizep() {
  sizex = sizex + 20;
  sizey = sizey + 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px"
}

function sizem() {
  sizex = sizex - 20;
  sizey = sizey - 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px";
}

.mdiv {
  background-color: blanchedalmond;
  padding: 10px;
  border-radius: 20px;
  width: fit-content;
  margin: 15px;
}

body {
  background-color: black;
  padding: 0;
  margin: 0;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 20px;
  background-color: orangered;
  border-radius: 4px;
}

.move-x,
.move-y,
.move-xp,
.move-ym,
.sizeplus,
.sizeminus,
.change-color {
  color: black;
  background-color: grey;
  border: none;
  border-radius: 15px;
  margin: 10px;
  padding: 15px;
  display: inline-block;
}

</style>
<div class="mdiv">
  <button class="change-color">Color</button>
  <button class="move-x">Position x</button>
  <button class="move-y">Position y</button>
  <button class="move-xp">Position  x minus</button>
  <button class="move-ym">Position y minus</button>
  <button class="sizeplus" onclick="sizep()">Increase size</button>
  <button class="sizeminus" onclick="sizem()">Decrease size</button>
</div>
<div class="box"></div>

Pen

Answer 1

You should have try clearing all the intervals that are being creating on mousedown and mouseup. This updated code is using debouncing approach since the more you use those button the more instance of those setInterval are getting created.

const pluss = document.querySelector(".box");
const moveY = document.querySelector(".move-y");
const moveX = document.querySelector(".move-x");
const movexP = document.querySelector(".move-xp");
const moveyM = document.querySelector(".move-ym");
const ccol = document.querySelector(".change-color");
let counterx = 940;
let countery = 460;
let sizex = 20;
let sizey = 20;
let intervalId;

ccol.addEventListener("click", function () {
  pluss.style.backgroundColor = `hsl(${Math.random() * 360}, 90%, 70%)`;
});

moveX.addEventListener("mousedown", function () {
  intervalId = setInterval(() => {
    counterx++;
    pluss.style.left = counterx + "px";
  }, 10);
});

moveX.addEventListener("mouseup", function () {
  clearInterval(intervalId);
});

moveX.addEventListener("mouseleave", function () {
  clearInterval(intervalId);
});

moveY.addEventListener("mousedown", function () {
  intervalId = setInterval(() => {
    countery++;
    pluss.style.top = countery + "px";
  }, 10);
});

moveY.addEventListener("mouseup", function () {
  clearInterval(intervalId);
});

moveY.addEventListener("mouseleave", function () {
  clearInterval(intervalId);
});

movexP.addEventListener("mousedown", function () {
  intervalId = setInterval(() => {
    counterx--;
    pluss.style.left = counterx + "px";
  }, 10);
});

movexP.addEventListener("mouseup", function () {
  clearInterval(intervalId);
});

movexP.addEventListener("mouseleave", function () {
  clearInterval(intervalId);
});

moveyM.addEventListener("mousedown", function () {
  intervalId = setInterval(() => {
    countery--;
    pluss.style.top = countery + "px";
  }, 10);
});

moveyM.addEventListener("mouseup", function () {
  clearInterval(intervalId);
});

moveyM.addEventListener("mouseleave", function () {
  clearInterval(intervalId);
});

function sizep() {
  sizex = sizex + 20;
  sizey = sizey + 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px";
}

function sizem() {
  sizex = sizex - 20;
  sizey = sizey - 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px";
}

.mdiv {
  background-color: blanchedalmond;
  padding: 10px;
  border-radius: 20px;
  width: fit-content;
  margin: 15px;
}

body {
  background-color: black;
  padding: 0;
  margin: 0;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 20px;
  background-color: orangered;
  border-radius: 4px;
}

.move-x,
.move-y,
.move-xp,
.move-ym,
.sizeplus,
.sizeminus,
.change-color {
  color: black;
  background-color: grey;
  border: none;
  border-radius: 15px;
  margin: 10px;
  padding: 15px;
  display: inline-block;
}

</style>
<div class="mdiv">
  <button class="change-color">Color</button>
  <button class="move-x">Position x</button>
  <button class="move-y">Position y</button>
  <button class="move-xp">Position  x minus</button>
  <button class="move-ym">Position y minus</button>
  <button class="sizeplus" onclick="sizep()">Increase size</button>
  <button class="sizeminus" onclick="sizem()">Decrease size</button>
</div>
<div class="box"></div>

Answer 2

As mentioned by others, the problem is that the several intervals are not cleared, which would work better: stopping the interval, instead of trying to counter the move with the mouse up, which seems what you are trying to do.

Theoretically, it could work if you are sure intervals run at the exact same time and the output is not rendered, but it would still make for an amazing stacking of intervals. So better is to clear the interval on mouse up instead, or have a continuous interval that alters a direction, but where the offset alteration is changed in the direction buttons. Clearing the interval is a far better use of resources though.

To keep your current setup with the interval, I have made an example where the mousup and down are assigned differently. By assigning them inside a single point, it is easier to change things as interval, step size, maybe extra animations, etc. As you can see, the values are stored in the 'setter' function, so there is no separate counterX/counterY. Using style like this is not the most effective way, but it is showing the clearInterval and single point of entry. Hope it doesn't confuse your layout too much :D

Since x and y also seemed to have been hard coded (to center on a certain screen size?), I took the liberty of resetting that to 0 and changing the 'translate' of the box to 50vw,50vh to center in the screen (ish). any left and top will then be offsets from that position

const pluss = document.querySelector(".box");
let intervalMove; //one general interval id for all movements

function set(classPlus, classMinus, property){
    
  let offset = 0; //general offset for x or y
  
  const elements = [document.querySelector(classPlus),
    document.querySelector(classMinus)];
  
  for(let i = 0; i < 2 ; i++){
    const element = elements[i], 
        alteration = -2 * i + 1; //just a confusing way to say 1 or -1 :p
    
    element.addEventListener("mousedown", function() {
      intervalMove = setInterval(() => {
      offset+= alteration;
      pluss.style[property] = offset + "px"
    }, 1);
    });

    element.addEventListener("mouseup", () => clearInterval(intervalMove));
  }
  
}

set(".move-x", ".move-xm", "left");
set(".move-y" ,".move-ym", "top");


document.querySelector(".change-color").addEventListener("click", function() {
  pluss.style.backgroundColor = `hsl(${Math.random() * 360}, 90%, 70%)`
});

let sizex = pluss.clientWidth, sizey = pluss.clientHeight; 
function resize(increase) {
    const step = increase ? 20 : -20;  
  sizex = sizex + step;
  sizey = sizey + step;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px"
}

.mdiv {
  background-color: blanchedalmond;
  padding: 10px;
  border-radius: 20px;
  width: fit-content;
  margin: 15px;
  
}

body {
  background-color: black;
  padding: 0;
  margin: 0;
  
}

.box {
  --leftOffset:0px;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translate(50vw, 50vh);
  height: 20px;
  width: 20px;
  background-color: orangered;
  border-radius: 4px;
}

.btn {
  color: black;
  background-color: grey;
  border: none;
  border-radius: 15px;
  margin: 10px;
  padding: 15px;
  display: inline-block;
}

<div class="mdiv">
  <button class="btn change-color">Color</button>
  <button class="btn move-x">Position x</button>
  <button class="btn move-y">Position y</button>
  <button class="btn move-xm">Position  x minus</button>
  <button class="btn move-ym">Position y minus</button>
  <button class="btn sizeplus" onclick="resize(true)">Increase size</button>
  <button class="btn sizeminus" onclick="resize(false)">Decrease size</button>
</div>
<div class="box"></div>