+ 3

I creating an animation,what's wrong with it?

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="container"> #container { width: 200px; height: 200px; background: green; position: relative; }</div> <div id="box"> #box { width: 50px; height: 50px; background: red; position: absolute; }</div> <script> indow.onload = function() { var pos = 0; //our box element var box = document.getElementById('box'); var t = setInterval(move, 10); function move() { if(pos >= 150) { clearInterval(t); } else { pos += 1; box.style.left = pos+'px'; } } }; </script> </body> </html>

javascript

11th Oct 2016, 4:51 PM

Thet Aung

5 Answers

+ 9

You make some simple mistake. First - after script tag you miss 'w' in 'window' word. Secound and MAIN MISTAKE - you put style of divs in wrong place. You should write it in css file or in <head> after <style> tag. Read about CSS or take part in SoloLearn CSS courses. Below I paste improved code. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #container { width: 200px; height: 200px; background: green; position: relative; } #box { width: 50px; height: 50px; background: red; position: absolute; } </style> </head> <body> <div id="container"></div> <div id="box"></div> <script> window.onload = function() { var pos = 0; //our box element var box = document.getElementById('box'); var t = setInterval(move, 10); function move() { if(pos >= 150) { clearInterval(t); } else { pos += 1; box.style.left = pos+'px'; } } }; </script> </body> </html> Hope I helped.

11th Oct 2016, 7:02 PM

Kaziu (Mark K.)