Hay un botón en el lado izquierdo de su contenedor, con el texto ¡Ir a la derecha!. Cuando el botón está en el lado izquierdo, al hacer clic en él, el botón se mueve al lado derecho del contenedor. Cuando el botón está en el lado derecho, el texto del botón es ¡Ir a la izquierda! Cuando el botón está en el lado derecho, al hacer clic en él, el botón se mueve hacia el lado izquierdo del contenedor.
Intenté esto: html:
<body> <div class="container"> <button id="flip-flop" onclick="moveRight()">Go Right!</button> </div> </body>archivo js:
function moveRight(){ const flip_flip_button = document.getElementById("flip-flop") flip_flip_button.addEventListener("click", function () { flip_flip_button.style.left = 400 + "px"; }); }CSS:
.container { position: fixed; top: 50%; left: 50%; width: 50%; background-color: gray; transform: translate(-50%, -50%); } #flip-flop{ position: relative; }El resultado de este código, el botón se mueve hacia la derecha (¿con un segundo clic? No sé por qué también) pero no responde. ¿Cómo puedo mover el botón derecho hasta el lado derecho del contenedor?
Varios problemas aquí.
Está agregando un detector de clics cada vez que se hace clic en el botón. En su lugar, solo agregue un oyente, que haga el trabajo real que desea.
No trabaje con element.style , ya que produce estilos en línea, que se consideran una práctica muy mala. En su lugar, prepare una clase CSS en su CSS que contenga los estilos deseados y cambie esa clase al hacer clic.
En este caso, la forma más fácil de alinear el botón a la derecha es configurar text-align: right en el elemento principal del botón.
document .getElementById('flip-flop') .addEventListener("click", function() { this.parentNode.classList.toggle('right'); }); .container { position: fixed; top: 50%; left: 50%; width: 50%; background-color: gray; transform: translate(-50%, -50%); } #flip-flop { position: relative; } .right { text-align: right; } #flip-flop::after { content: " right!"; } .right #flip-flop::after { content: " left!"; } <div class="container"> <button id="flip-flop">Go</button> </div>