You are currently viewing Follow these 3 Steps to Moving an Elements in JavaScript

Follow these 3 Steps to Moving an Elements in JavaScript

Moving Elements in JavaScript

Moving Elements in JavaScript means automatically changing the position of an element without any interaction. We can move the element by using both CSS and Javascript.  If you want to move an HTML element in javascript, we need to create setInterval function and use the “left” property inside it. You can execute a function repeatedly at a specific time interval by creating the setInterval function. So, in this article, we will see how to move elements in Javascript.

How to move an element

We have to create the element in HTML, give some styling in CSS, and move the element using JavaScript. So, follow these 3 steps to create moving elements.

HTML step

In this HTML step, you need to create your elements with an ID name. We will use the ID name to style in CSS and move elements in JavaScript. In the below example, we have created the <div> element with IDname “box“.
<div id="box"></div>

CSS step

In this CSS step, you need to style your element.  In the example below, we have created a red color box and set the “position” property to “absolute”. You don’t necessarily have to do the same styles, you can set the styles as per your preference and requirement.
#box{
      background-color: red;
      width: 30px;
      height: 30px;
      position: absolute;
      left: 500;
      top: 500;
 }
You must set the “position” property to “absolute” value because only then will your element’s position be constrained.

JavaScript step

It is an important step because this is where we are going to automatically move our element.
var x =0
window.onload = function(){
    var box = document.getElementById("box")
    setInterval(function(){
    x++
    box.style.left=x + 'p'
  },10)
}
Steps
  1. In this example, firstly we have assigned the variable ‘x’ to 0.
  2. window.onload = function(){} : This line creates the event handler function, within this, we can specify what should happen when the window is finished loading. This ensures that the code inside the function is executed after the document is fully loaded.
  3. Inside the event handler function, we retrieve a reference to the HTML element with the id “box“.
  4. setInterval(function(){}, 10) : In this line we create the setInterval function() inside the event handler function,  it’s used to execute a function at a given time interval. In this case, we have to call an anonymous function every 10 milliseconds.
  5. x++: The variable x is incremented by 1 on each execution of the anonymous function.
  6. box.style.left = x + 'px': This line updates the CSS left property of the box element. It moves the element horizontally by setting the left position to the current value of x plus the unit ‘px’ (pixels). As x increases, the element will gradually move to the right on the screen.
  7. The process continues indefinitely since setInterval is used, and the animation loops every 10 milliseconds.
So, our full code would look like this:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		#box{
			background-color: red;
			width: 30px;
			height: 30px;
			position: absolute;
			left: 500;
			top: 500;
		}
	</style>
</head>
<body>
		<div id="box"></div>

<script type="text/javascript">
	var x =0
	window.onload = function(){
		var box = document.getElementById("box")
		setInterval(function(){
			x++
			box.style.left=x + 'p'
		},10)
	}
</script>
</body>
</html>
The output of this code will look like :

So, you can easily be Moving your HTML Elements in JavaScript by following these steps.

Leave a Reply