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.
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;
}