My code isn't working, please help!

Hi. So I tried to do this code following the animation tutorial but it doesn't move. It gave me the error message: Uncaught TypeError: Cannot read property 'style' of null at move (VM27 tutorial5.html:17) Here is the code: HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="stylesheet1.css"> <title>JS Tutorial - Creating Animation With setInterval();</title> <script type='text/javascript'> var pos = 0; 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> </head> <body> <div id="container"> <div id="box"></div> </div> </body> </html> And here is the CSS: #container { width: 200px; height: 200px; background: green; position: relative; } #box { width: 50px; height: 50px; background: red; position: absolute; } Thank you!

javascript animations

7th Feb 2017, 7:39 AM

Kevin W. Macaulay

5 Answers

+ 6

Alvaro is right code is fine, the structure isn't. basically you are trying to make an omelet before even getting the eggs <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="stylesheet1.css"> <title>JS Tutorial - Creating Animation With setInterval();</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 id="box"></div> </div>  <script type='text/javascript'> var pos = 0; var box = document.getElementById('box'); // the above line in specific is the problem causer var t = setInterval(move, 10); function move() { if(pos >= 150){ clearInterval(t); } else { pos +=1; box.style.left = pos+"px"; } } </script> </body> </html>

7th Feb 2017, 7:50 AM

Burey

+ 4

check in my codes for solution to the left/right movement 'box movement' code

7th Feb 2017, 8:18 AM

Burey

+ 3

It is good practice to place scripts at the bottom of the body element. Exceptions might be when you do not need access to the DOM in the script. For your 'infinite' loop, try CSS3 transitions. Alternatively, make use of easing in JavaScript. But first: The problem with your code is centered around the left and right style properties. When pos reaches 500, 'right' becomes 500px. Keep in mind that 'left' is already 490px. So, as pos increases to 600, 'right' becomes '600px' but 'left' is still 490px. If you've guessed right, the 'left' and 'right' properties are interfering in each other's business. This is actually what they are to do. They are to position the element in the DOM. So, the left property always keeps the box's topmost left edge at 400px, prevent the right property from shifting the box to the left. To solve this problem find a way to properly increment and decrement the pos variable. There is however, a way to use both right and left properties, but I'm going to write code based on what you have written. // Define destinations for the box var destinations = [500, 0]; // The current destination array index var i = 0; // The current box position var pos = 0; var speed = 1; // pixels per frame function move() { if (i === 0) { // right pos += speed; if (pos >= destinations[i]) { pos = destinations[i]; i = 1; } } else if (i === 1) { // left pos -= speed; if (pos <= destinations[i]) { pos = destinations[i]; i = 0; } } box.style.left = pos + 'px'; } I haven't tested it, but it should work. There are some design flaws here, having to do with collision detection with its restricting bounds. I'll leave it up to you. (or you can just ask me). Also take time to learn easing and tweening.

7th Feb 2017, 11:35 AM

John

+ 2

When the script is run, the HTML is still not loaded, because the script is placed into the head part of your HTML document. Try to place it and the end of the BODY part. I've tried it, and it works fine.

7th Feb 2017, 7:45 AM

Álvaro

+ 2

Thank you, guys. Ok so what if now I want to make it so that the box will start to move to the left when it finishes moving to the right and repeats in a loop forever, going right and left. How is this code?: function move() { if(pos >= 150){ pos +=1; box.style.right = pos+"px"; } else { pos +=1; box.style.left = pos+"px"; } } I tried it but it didn't work. The box just moved to the right and just sat there instead of heading back left and loop. Thanks.

7th Feb 2017, 8:10 AM

Kevin W. Macaulay