Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

149
Visualizações
How to make an action on first click and another action on second click

My goal is to move a div element to the right side of the page on the first click and move it back to the left if I click it again and so on. How can I do this in javascript?

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

As enhzfelp said in their comment, the best solution would be to create a css class which moves your element to the right side of the page and to add / remove it with javascript.

If your goal is actually to perform one action and on next event call perform another, you can simply change a variable whenever the event is called.

Example code:

let right = false;

someElement.on('click', () => {
  right = !right;

  if (right) moveRight();
  else moveLeft();
});

function moveRight() { ... }
function moveLeft() { ... }
about 4 years ago · Juan Pablo Isaza Relatório

0

So, as I understood, you want to make so on click, the div element move to the opositive direction of left or right.

You can make this with an event listener, that listens to the click event and execute whatever you want on every click.

document.addEventListener('click', function(event) {
  // your code that executes on every click
});

This event listener listens the click on all your webpage, so if you want to only listen the click when the use click your div, you need to get the div. There are several ways, but I recomend you to add an id to the div.

<div id="iAmYourElement"></div>

And then get the element in JavaScript

const element = document.getElementById("iAmYourElement");
element.addEventListener('click', function(event) {
  // your code that executes on every click
});

Now that we have the way to deal with the click event, let's talk about the code that goes inside the listener.

One way to do this is creating two CSS classes, one is your div on the left and another whe div on your right. So, if we need the element to be on the right, we add the right-class, and if we need the div to be to the left, we add left-class and remove right-class.

Final javascript code will looks like that:

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")
}
about 4 years ago · Juan Pablo Isaza Relatório

0

You can also do this

<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>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda