What could be causing my Javascript element to continue moving past 200px?

Question

What could be causing my Javascript element to continue moving past 200px?

My code has a "voila" element that is not stopping after reaching 200px. What could be the issue in the logic of the code and how can I fix it?

var voila = document.querySelector(".voila");
voila.textContent = "hahahaha";
voila.style.position = "absolute";


setInterval(function() {
  var left = parseInt(window.getComputedStyle(voila).getPropertyValue("left"));
  if (left >= 0) {
    voila.style.left = left + 2 + "px";
  } else if (left <= 200) {
    voila.style.left = left - 10 + "px";
  }
}, 10);

* {
  padding: 0;
  margin: 0;
}

<div class="voila"></div>

Any suggestions or assistance would be greatly appreciated!

javascript html css

Answer 1

Answer №1

I believe this is what you intended to achieve.

var element = document.querySelector(".element");
element.textContent = "hahahaha";
element.style.position = "absolute";


setInterval(function() {
  var left = parseInt(window.getComputedStyle(element).getPropertyValue("left"));
  if (left >= 0 && left <= 200) {
    element.style.left = left + 2 + "px";
  }
}, 10);

* {
  padding: 0;
  margin: 0;
}

<div class="element"></div>

Alternatively, here is the css method which may work better:

.element {
  x-transition: all 1s ease-in-out;
  animation: anim 1.7s infinite;
  position: absolute;
}

@keyframes anim {
  0% {
    left: 0;
  }
  50% {
    left: 200px;
  }
  100% {
    left: 0;
  }
}

<div class="element">ABC</div>

Answer 2

I believe this is what you intended to achieve.

var element = document.querySelector(".element");
element.textContent = "hahahaha";
element.style.position = "absolute";


setInterval(function() {
  var left = parseInt(window.getComputedStyle(element).getPropertyValue("left"));
  if (left >= 0 && left <= 200) {
    element.style.left = left + 2 + "px";
  }
}, 10);

* {
  padding: 0;
  margin: 0;
}

<div class="element"></div>

Alternatively, here is the css method which may work better:

.element {
  x-transition: all 1s ease-in-out;
  animation: anim 1.7s infinite;
  position: absolute;
}

@keyframes anim {
  0% {
    left: 0;
  }
  50% {
    left: 200px;
  }
  100% {
    left: 0;
  }
}

<div class="element">ABC</div>

Answer 3

Answer №2

this specific portion of code else if (left <= 200) doesn't make sense at all

here's a more efficient way to achieve the same result:

const element = document.querySelector('.element');
element.textContent    = 'hahahaha';
element.style.position = 'absolute';
element.animation = { pos: 0, min: 0, max:200, stepOn: 2, stepBack: -10, step: 2 }


setInterval(() =>
  {
  element.animation.pos += element.animation.step

  if (element.animation.pos >= element.animation.max) element.animation.step = element.animation.stepBack
  if (element.animation.pos <= element.animation.min) element.animation.step = element.animation.stepOn
 
  element.style.left = `${element.animation.pos}px`
  }, 10)

* {
  padding : 0;
  margin  : 0;
}

<div class="element"></div>

You can also utilize requestAnimationFrame() for smoother animations

const element  = document.querySelector('.element')
 
element.textContent    = 'hahahaha';
element.style.position = 'absolute';
element.animation = { pos: 0, min: 0, max:200, stepOn: 2, stepBack: -10, step: 2 }

function moveElement()
  {
  element.animation.pos += element.animation.step

  if (element.animation.pos >= element.animation.max) element.animation.step = element.animation.stepBack
  if (element.animation.pos <= element.animation.min) element.animation.step = element.animation.stepOn

  element.style.left = `${element.animation.pos}px`

  requestAnimationFrame(moveElement)
  }
requestAnimationFrame(moveElement)

*{
  padding: 0;
  margin: 0;
}

<div class="element"></div>

Answer 4

this specific portion of code else if (left <= 200) doesn't make sense at all

here's a more efficient way to achieve the same result:

const element = document.querySelector('.element');
element.textContent    = 'hahahaha';
element.style.position = 'absolute';
element.animation = { pos: 0, min: 0, max:200, stepOn: 2, stepBack: -10, step: 2 }


setInterval(() =>
  {
  element.animation.pos += element.animation.step

  if (element.animation.pos >= element.animation.max) element.animation.step = element.animation.stepBack
  if (element.animation.pos <= element.animation.min) element.animation.step = element.animation.stepOn
 
  element.style.left = `${element.animation.pos}px`
  }, 10)

* {
  padding : 0;
  margin  : 0;
}

<div class="element"></div>

You can also utilize requestAnimationFrame() for smoother animations

const element  = document.querySelector('.element')
 
element.textContent    = 'hahahaha';
element.style.position = 'absolute';
element.animation = { pos: 0, min: 0, max:200, stepOn: 2, stepBack: -10, step: 2 }

function moveElement()
  {
  element.animation.pos += element.animation.step

  if (element.animation.pos >= element.animation.max) element.animation.step = element.animation.stepBack
  if (element.animation.pos <= element.animation.min) element.animation.step = element.animation.stepOn

  element.style.left = `${element.animation.pos}px`

  requestAnimationFrame(moveElement)
  }
requestAnimationFrame(moveElement)

*{
  padding: 0;
  margin: 0;
}

<div class="element"></div>

What could be causing my Javascript element to continue moving past 200px?

Answer №1

Answer №2

Similar questions

Most efficient method for comparing two JSON arrays and rearranging their positions

Update app content without requiring users to download a new APK

Executing a PHP script

Tips for assigning a value to an Option element when the selection changes in JSP

Guide to installing angular-ui-bootstrap through npm in angularjs application

Invoking a method in Vue.js from another component

Incapable of modifying the inner content of a table

I am facing an issue with Angular where the $http.get method is

Pressing the button in the navigation bar results in an expansion of the navbar

ERROR: mammoth has not been declared

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

There is a lack of a responsive page after being redirected from Facebook

Using both ng-if and ng-click in AngularJS for enhanced functionalities

When using jQuery, remember to encode square brackets in order to target specific

What are some ways to customize the appearance of React Semantic components?

Can you explain the purpose of App.hiddenDivs in jQuery code snippet provided?

Optimal Procedure for New Users Form (Jade / Angular) in HTML

Positioning the search bar to the left with react-bootstrap-table

unable to display images from a folder using v-for in Vue.js

Dynamic Form Submission - Displaying Notifications for Success and Failure