How to move a square back and forth-CodePudding

I am trying to make a square move back and forth by pressing a button one time with javascript. I can make it move to the right edge but don't know how to make it move back again. Help appreciated.

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");   
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos  ; 
      elem.style.left = pos   "px"; 
    }
  }
}

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<body>
<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

CodePudding user response：

whenever you are calling the myMove function it has pos set to 0. you should calculate position on the fly, and based on that logic you will be moving it right or left. assume the length is 350, you can do something like this:

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");   
  let pos = elem.offsetLeft;
  let dir = "";
  if(pos === 0) {
    dir = "right";
  } else {
    dir = "left";
  }
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350 && dir == "right") {
      clearInterval(id);
    } if (pos == 0 && dir == "left") {
      clearInterval(id);
    } else if(dir === "right") {
      pos  ; 
      elem.style.left = pos   "px"; 
    } else if(dir === "left") {
      pos--; 
      elem.style.left = pos   "px"; 
    }
  }
}

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<body>
<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

CodePudding user response：

I know you are asking for a javascript-based solution, but it's worth noting that this kind of presentation can be achieved with CSS alone.

So, for the sake of completeness, I am posting a CSS-only solution below.

N.B. There is a key difference between what CSS is capable of and what JS is capable of.

Note that in the CSS-only example below, each time you click the button, you will then have to click outside the button before the button will work again.

CSS-only Working Example:

.move-square-button {
  display: block;
  margin-bottom: 12px;
  cursor: pointer;
}

.container {
  width: 400px;
  height: 144px;
  position: relative;
  background-color: yellow;
}

.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: red;
  transform: translateX(0);
}

.move-square-button:focus {
  cursor: not-allowed;
}

.move-square-button:focus   .container .square {
  animation: moveSquareRightThenLeft 2s linear;
}

@keyframes moveSquareRightThenLeft {
  50% { transform: translateX(calc(400px - 100%)); }
}

<button  type="button">Click Me</button> 

<div >
  <div ></div>
</div>

CodePudding user response：

Not sure if this is exactly what you wanted but below code will animate the red block to move back and forth once every time you click the button.

Basically you just maintain a variable that stores the direction of movement. So here you set forward to true if its moving forwards and false if backwards. And based on the direction i.e value of forward, you either increase the value of pos or decrease it.

Now if the block is moving forward and the position is 350, set forward to false.

And finally when the direction is not forward and the position is 0, you clear the interval to end the animation, as the block reached back to initial position.

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");   
  let pos = 0;
  id = setInterval(frame, 5);
  let forward = true;
  function frame() {
    if(!pos && !forward) {
      clearInterval(id);
      forward = true;
      return;
    }
    if(pos == 350 && forward) {
      forward = false;
    }
    forward ? pos   : pos--; 
    elem.style.left = pos   "px"; 
  }
}

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<body>
<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

CodePudding user response：

Not the prettiest solution but shoud do the trick. Essentially if the rectangle reaches the right edge the "inverseDirection" variable inverts from false to true and therefore the pos variable decrements instead of increment. The opposite happens in the left edge.

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");   
  let pos = 0;

  let inverseDirection = false;

  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos === 350 && !inverseDirection) {
      inverseDirection = true;
    }else if(pos === 0 && inverseDirection){
      inverseDirection = false;
    }
    pos = (inverseDirection) ? pos-1 : pos 1; 
    elem.style.left = pos   "px"; 
  }
}

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>