Mi objetivo es mover un elemento div al lado derecho de la página con el primer clic y volver a moverlo a la izquierda si lo vuelvo a hacer clic y así sucesivamente. ¿Cómo puedo hacer esto en javascript?
Como dijo enhzfelp en su comentario, la mejor solución sería crear una clase css que mueva su elemento al lado derecho de la página y agregarlo/eliminarlo con javascript.
Si su objetivo es en realidad realizar una acción y en la siguiente llamada de evento realizar otra, simplemente puede cambiar una variable cada vez que se llame al evento.
Código de ejemplo:
let right = false; someElement.on('click', () => { right = !right; if (right) moveRight(); else moveLeft(); }); function moveRight() { ... } function moveLeft() { ... }Entonces, como entendí, desea hacer que al hacer clic, el elemento div se mueva en la dirección opositiva de izquierda o derecha.
Puede hacer esto con un detector de eventos, que escucha el evento de clic y ejecuta lo que quiera en cada clic.
document.addEventListener('click', function(event) { // your code that executes on every click });Este detector de eventos escucha el clic en toda su página web, por lo que si solo desea escuchar el clic cuando usa su div, debe obtener el div. Hay varias formas, pero te recomiendo que agregues una identificación al div.
<div id="iAmYourElement"></div>Y luego obtener el elemento en JavaScript
const element = document.getElementById("iAmYourElement"); element.addEventListener('click', function(event) { // your code that executes on every click });Ahora que tenemos la forma de lidiar con el evento de clic, hablemos sobre el código que va dentro del oyente.
Una forma de hacer esto es crear dos clases CSS, una es tu div a la izquierda y otra whe div a tu derecha. Entonces, si necesitamos que el elemento esté a la derecha, agregamos la clase derecha, y si necesitamos que el div esté a la izquierda, agregamos la clase izquierda y eliminamos la clase derecha.
El código javascript final se verá así:
const element = document.getElementById("iAmYourElement"); let isDivOnLeft = true; element.addEventListener('click', function (event) { // executes if you click on the div isDivOnLeft = !isDivOnLeft // We negate the value of isDivOnLeft, so if it was true, it will now be false and vice versa. if (isDivOnLeft) { elementToRight() } else { elementToLeft() } }); function elementToRight() { element.classList.remove("left-class") element.classList.add("right-class") } function elementToLeft() { element.classList.remove("right-class") element.classList.add("left-class") }También puedes hacer esto
<script> var clickCount = 0; function checkClick() { if ( clickCount % 2 == 0 ) { alert("first click"); } else { alert("Second click"); } clickCount++ } </script> <button onclick="checkClick()">Click me</button>