help with my JS and HTML box moving mastery (no jquery)

I'm trying to make all objects in a webpage move using js console or bookmarklets. I have a couple of div tags and js. I need CSS for this. why does it say, "Uncaught TypeError: Cannot read property 'length' of undefined Line: 29" here's my JS. var m = document.getElementsByTagName("body"); var l = m.childNodes; var oi; var mi; var mb; var f; function move(){ l[x].style.position = "relative"; if (l[x].style.top>(window.innerHeight/2)-l[x].height){ oi = l[x].style.top; l[x].style.top=oi+1; }else if(l[x].style.top<(window.innerHeight/2)+l[x].height){ oi = l[x].style.top; l[x].style.top=oi-1; }else{ mb = 1; }if (l[x].style.left>(window.innerWidth/2)-l[x].width){ oi = l[x].style.left; l[x].style.left=oi+1; }else if(l[x].style.left<(window.innerWidth/2)+l[x].width){ oi = l[x].style.left; l[x].style.left=oi-1; }else{ mi = 1; }if((mb==1)&&(mi==1)){ x++; } } for(var x=0;x<l.length;){ f = setInterval(move,100); } here's HTML. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div style = "background:rgb(0,0,0); width:200;height:20;"> </div> <div style = "background:rgb(255,0,0); width:200;height:20;"> </div> <div style = "background:rgb(255,0,0); width:200;height:20;position:relative;top:400;"> </div> <div style = "background:rgb(255,0,0); width:200;height:20;position:relative;left:300;"> </div> </body> </html> send me a code or fixed version of the js if you figure it out.

html css javascript bookmarklet webdevtools

9th Apr 2019, 12:40 AM

Biglegsbigteeth

1 Answer

As you have selected child nodes of body hence it will return all the div tags... I this program you should define x first.. As l[0].style.position= "relative"; And further give the value of x Select the div by their index number means value of x= 0,1,2,3 Then put the value of x in you program. Select specific value of x on which tag you want to add the style then run.. you forgot to add x++ in for loop also

9th Apr 2019, 2:54 AM

Prabhat Kumar Singh