style.left isn't working, but, style.background is working-CodePudding

i'm trying to do a simple task of moving a div's position when the mouse is clicked. While style.left isn't working, style.backgroundColor is working. Google hasn't been helpful, please help

`body {
background-color: aquamarine;
}
.box {
 height: 120px;
 width: 120px;
 border-radius: 60px;
 background-color: black;
 }`

const moving = document.querySelector(".box");

function move() {
let x = 100;

moving.style.left = 10   "px";
console.log("hi");

moving.style.backgroundColor = "white";
}

moving.addEventListener("click", move);

CodePudding user response：

by default div have a static position

static

The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

https://developer.mozilla.org/fr/docs/Web/CSS/position

an idea can be to set the position of your box in relative or absolute

const moving = document.querySelector(".box");

function move() {
  let x = 100;

  moving.style.left = 10   "px";
  console.log("hi");

  moving.style.backgroundColor = "white";
}

moving.addEventListener("click", move);

body {
  background-color: aquamarine;
}

.box {
  height: 120px;
  position: relative;
  width: 120px;
  border-radius: 60px;
  background-color: black;
}

`

<div ></div>