Este es mi css y html para el peso y las flechas. Quiero hacer que el peso se mueva hacia la izquierda y hacia la derecha haciendo clic en las flechas. Por favor, ayúdame a encontrar 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>Tengo HTML y CSS, pero me gustaría saber cómo hacer que jS mueva este peso hacia la derecha y hacia la izquierda haciendo clic en las flechas.
Prueba esto:
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; }