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

javascript onload transitions

20th Mar 2018, 1:17 AM

Jordan S Reynolds

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

+ 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

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