• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

202
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.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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;
}
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error