+ 1

Div onload wont drop down

I'm trying to make the div slowly drop down when the page loads to 100px lower using setInterval but it's not working for some reason. HTML: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body onload="dropbox"> <div class="container"></div> </body> </html> CSS: .container { width:100px; height:100px; background-color:purple; } Javascript: function dropbox(){ var p=0; var t=setInterval(drop,10); var box=document.getElementsByClassName('container'); function drop(){ if(p>=100){ clearInterval(t); } else{ p+=1; box[0].style.top=p+"px"; } } } Please Help! What am I doing wrong?

20th Mar 2018, 1:17 AM
Jordan S Reynolds
Jordan S Reynolds - avatar
3 Answers
+ 3
In addition to not invoking the dropbox() function, the div element needs to have position attribute set in css like position: relative; See modified demo below https://code.sololearn.com/W2PcFCcGt4JP/?ref=app
20th Mar 2018, 6:41 AM
Lord Krishna
Lord Krishna - avatar
+ 1
function dropbox is not being called so entire js won't be executed pls check it
20th Mar 2018, 1:32 AM
kaliki chandu
kaliki chandu - avatar
0
I changed the HTML onload from 'dropbox' to 'dropbox()' but it still didn't work, was that the right thing to do or am I still missing something? HTML: <html> <head> <title>Page Title</title> </head> <body onload="dropbox()"> <div class="container"></div> </body> </html>
20th Mar 2018, 2:26 AM
Jordan S Reynolds
Jordan S Reynolds - avatar