为什么我的 Javascript 代码中的元素在达到 200px 后不会停止移动？

Question

the "voila" element in my code won't stop after reaching 200px?
what is the problem in the logic of the code?
and how do I make it work.

 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 help?

Answer 1

I think you wanted to do this.

 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 && left <= 200) { voila.style.left = left + 2 + "px"; } }, 10);

 * { padding: 0; margin: 0; }

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

And the css way of doing it (works better)

 .voila { 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="voila">ABC</div>

Answer 2

this part else if (left <= 200) is non sens

you can do that:

 const voila = document.querySelector('.voila'); voila.textContent = 'hahahaha'; voila.style.position = 'absolute'; voila.mov = { pos: 0, min: 0, max:200, stepOn: 2, stepBack: -10, step: 2 } setInterval(() => { voila.mov.pos += voila.mov.step if (voila.mov.pos >= voila.mov.max) voila.mov.step = voila.mov.stepBack if (voila.mov.pos <= voila.mov.min) voila.mov.step = voila.mov.stepOn voila.style.left = `${voila.mov.pos}px` }, 10)

 * { padding: 0; margin: 0; }

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

You can also use requestAnimationFrame()

 const voila = document.querySelector('.voila') voila.textContent = 'hahahaha'; voila.style.position = 'absolute'; voila.mov = { pos: 0, min: 0, max:200, stepOn: 2, stepBack: -10, step: 2 } function movInOut() { voila.mov.pos += voila.mov.step if (voila.mov.pos >= voila.mov.max) voila.mov.step = voila.mov.stepBack if (voila.mov.pos <= voila.mov.min) voila.mov.step = voila.mov.stepOn voila.style.left = `${voila.mov.pos}px` requestAnimationFrame(movInOut) } requestAnimationFrame(movInOut)

 *{ padding: 0; margin: 0; }

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