Question

0

35

Views

How to use JS to move the box left and right

This is my css and html for the weight and arrows. I want to make the weight to move left and right by clicking arrows. Please help me to find js.

.container {
  width: 1050px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 255, 3.5, 0.4);
}
.arrow {
  top: 50%;
  transform: translate(0, -50%);
  position: absolute;
  font-size: 100px;
  cursor: pointer;
}
.right {
  top: 50%;
  transform: translate(0, -50%);
  position: absolute;
  font-size: 100px;
  cursor: pointer;
  right: 0;
}
.board {
  transform-origin: 50%, 50%;
  width: 1000px;
  height: 10px;
  background: #ff0;
  position: relative;
  top: 140px;
  left: 25px;
}
.weight {
  transform-origin: -50% -50%;
  width: 50px;
  height: 50px;
  background: #f00;
  position: relative;
  top: 140px;
  left: 500px;
}

<div class="container">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <div class="arrow left"><i class="fas fa-chevron-left"></i></div>
  <div class="arrow right"><i class="fas fa-chevron-right"></i></div>
  <div class="scale">
    <div class="base"></div>
    <div class="gravity">
      <div class="weight"></div>
      <div class="board"></div>
    </div>
  </div>
</div>

I have HTML and CSS but would like to know to make jS how to make move this weight right and left by clicking the arrows.

about 1 month ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-03T17:13:10.835Z

Try this:

HTML:

<div class="arrow left" onclick="arrowLeft"><i class="fas fa-chevron-left"></i></div>
<div class="arrow right" onclick="arrowRight"><i class="fas fa-chevron-right"></i></div>
<div class="weight" id="weight"></div>

JS:

var left = 0
var right = 0
function arrowLeft() {
   let x = document.getElementById("weight")
   left = left + 25 + "px"
   x.style.left = left;
}
function arrowRight() {
   let x = document.getElementById("weight")
   right = right + 25 + "px"
   x.style.left = right;
}