Como escribí en el título, cuando el usuario hace clic en el cuadrado, debe moverse 100 px hacia la derecha y, después del siguiente clic, debe moverse 100 px nuevamente hacia la derecha, pero el cuadrado vuelve a la izquierda. ¿Cómo puedo arreglar esto?
También en el código JSFiddle funciona, pero cuando abro esto en Chrome, me da un error:
No se pueden leer las propiedades de nulo (leyendo 'addEventListener')
<html> <head> <title>JavaScript animation</title> <style> #square { width: 100px; height: 100px; background-color: #333; position: absolute; left: 0px; top: 100px; transition-duration: 3s; transition: left 1.5s ease-in-out; } #square.active { left: calc(100px); transition: left 1.5s ease-in-out; } </style> <script> const square = document.querySelector('#square'); square.addEventListener('click', toggleActive); function toggleActive() { square.classList.toggle('active'); } </script> </head> <body> <div id="square"></div> </body> </html>En este momento, simplemente está alternando la clase, de modo que se mueva hacia la derecha y regrese a su posición original.
Debe agregar un valor al valor ya existente, en este caso, 100 píxeles.
Además, no recibe un error de su violín original.
const square = document.querySelector('#square'); square.addEventListener('click', moveRight); function moveRight() { square.style.left = square.offsetLeft + 100+'px'; } #square { width: 100px; height: 100px; background-color: #333; position: absolute; left: 0px; top: 100px; transition-duration: 3s; transition: left 1.5s ease-in-out; } <div id="square"></div>