smartalco Posted September 7, 2007 Share Posted September 7, 2007 code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><link type="text/css" rel="stylesheet" href="style.css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">var gravity=5var grav_x=0var grav_y=1var x_vel=(Math.floor(Math.random()*11)-5)var y_velvar x_newvar y_newvar xvar yvar widthvar heightvar tfunction movement(){width=window.innerWidthheight=window.innerHeightx=document.getElementById("ball").style.lefty=document.getElementById("ball").style.heightdocument.write(x)x_vel=x_vel+(gravity*grav_x)y_vel=y_vel+(gravity*grav_y)x_new=x+x_vely_new=y+y_velif (x_new<0) { x_new=0 x_vel=abs(x_vel)}if (x_new>(width-40)) { x_new=width x_vel=-abs(x_vel)}if (y_new<0) { y_new=0 y_vel=abs(y_vel)}if (y_new>(height-40)) { y_new=height y_vel=-abs(y_vel)}document.getElementById("ball").style.left=x_newdocument.getElementById("ball").style.top=y_newdocument.write(x_new)document.write(y_new)t=setTimeout("movement()",100)}function g_up() { gravity=gravity+3}function g_down() { gravity=gravity-3 if (gravity<0){ gravity=0 }}function d_up() { grav_x=-1 grav_y=0}function d_down() { grav_x=1 grav_y=0}function d_left() { grav_y=-1 grav_x=0}function d_right() { grav_y=1 grav_x=0}</script></head><body onLoad="movement()"><img align="center" src="header.png" /><div id="controls"><table align="center"> <tr> <td> </td> <td><img src="up.png" onClick="d_up()" /></td> <td> </td> <td colspan="2" style="width:20px"> </td> <td><img src="up.png" onClick="g_up()" /></td> </tr> <tr> <td><img src="left.png" onClick="d_left()" /></td> <td> </td> <td><img src="right.png" onClick="d_right()" /></td> <td colspan="3"> </td> </tr> <tr> <td> </td> <td><img src="down.png" onClick="d_down()" /></td> <td colspan="3"> </td> <td><img src="down.png" onClick="g_down()" /></td> </tr></table><span style="color:#a0a0a0; font-size:.8em">Click the arrows on the left to change the direction of gravity and the arrows on the right to change the strength of gravity.</span></div><div id="ball"><img src="ball.png" /></div></body></html> when loading the page, firefox's error console says "document.getElementById("ball") has no properties" with the error being on line 51 (the third 'getElement' in the code)i already have the left and top attributes defined in the css, im just using javascript to make a ball bounce around the screen (yes, seems pointless and annoying, no, I don't care, thats all thats on this page)any ideas? Link to comment Share on other sites More sharing options...
Jesdisciple Posted September 7, 2007 Share Posted September 7, 2007 I got past that error by assigning var ball...ball=document.getElementById("ball"), then using ball to access the element's properties. But then other errors come in.New code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <link type="text/css" rel="stylesheet" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> var gravity = 5 var grav_x = 0 var grav_y = 1 var x_vel=(Math.floor(Math.random()*11)-5) var y_vel var x_new var y_new var x var y var width var height var t var ball function movement(){ width=window.innerWidth height=window.innerHeight ball=document.getElementById("ball") x = ball.style.left y = ball.style.height document.write(x) x_vel=x_vel+(gravity*grav_x) y_vel=y_vel+(gravity*grav_y) x_new=x+x_vel y_new=y+y_vel if (x_new<0) { x_new=0 x_vel=Math.abs(x_vel) } if (x_new>(width-40)) { x_new=width x_vel=-Math.abs(x_vel) } if (y_new<0) { y_new=0 y_vel=Math.abs(y_vel) } if (y_new>(height-40)) { y_new=height y_vel=-Math.abs(y_vel) } ball.style.left=x_new ball.style.top=y_new document.write(x_new) document.write(y_new) t=setTimeout("movement()",100) } function g_up() { gravity=gravity+3 } function g_down() { gravity=gravity-3 if (gravity<0){ gravity=0 } } function d_up() { grav_x=-1 grav_y=0 } function d_down() { grav_x=1 grav_y=0 } function d_left() { grav_y=-1 grav_x=0 } function d_right() { grav_y=1 grav_x=0 } </script> </head> <body onLoad="movement()"> <img align="center" src="header.png" /> <div id="controls"> <table align="center"> <tr> <td> </td> <td><img src="up.png" onClick="d_up()" /></td> <td> </td> <td colspan="2" style="width:20px"> </td> <td><img src="up.png" onClick="g_up()" /></td> </tr> <tr> <td><img src="left.png" onClick="d_left()" /></td> <td> </td> <td><img src="right.png" onClick="d_right()" /></td> <td colspan="3"> </td> </tr> <tr> <td> </td> <td><img src="down.png" onClick="d_down()" /></td> <td colspan="3"> </td> <td><img src="down.png" onClick="g_down()" /></td> </tr> </table> <span style="color:#a0a0a0; font-size:.8em">Click the arrows on the left to change the direction of gravity and the arrows on the right to change the strength of gravity.</span> </div> <img src="ball.png" /> <div id="ball"> </div> </body></html> Warning: Error in parsing value for property 'left'. Declaration dropped.Source File: file:///C:/Documents%20and%20Settings/Cindy/Desktop/Chris'%20Documents/HTML/bouncing.htmlLine: 0Warning: Error in parsing value for property 'top'. Declaration dropped.Source File: file:///C:/Documents%20and%20Settings/Cindy/Desktop/Chris'%20Documents/HTML/bouncing.htmlLine: 0Error: movement is not definedSource File: file:///C:/Documents%20and%20Settings/Cindy/Desktop/Chris'%20Documents/HTML/bouncing.htmlLine: 56 CSS - file://localhost/C:/Documents%20and%20Settings/Cindy/Desktop/Chris'%20Documents/HTML/bouncing.htmlDOM style propertyInvalid value for property: topLine 1: NaN ---^Apparently, you're trying to assign NaN (Not a Number) to these properties. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 7, 2007 Share Posted September 7, 2007 Look at where these two lines are:document.getElementById("ball").style.left=x_newdocument.getElementById("ball").style.top=y_newThey aren't in a function, they are getting executed before the "ball" div gets created. So at that point obviously it doesn't have any properties, because it hasn't been created yet. Put all of these statements in a function and have the function run onload, or move the Javascript down to the end of the file after everything has been set up. I got past that error by assigning var ball...ball=document.getElementById("ball"), then using ball to access the element's properties.That doesn't fix the problem (it doesn't make Javascript access the element on the page, which still doesn't exist), it just uses a Javascript object that isn't going to give an error that it doesn't have properties. The goal isn't just to "get rid of the error", the goal is to make the code do what it is supposed to. The NaN value is there due to the fact that the element doesn't exist on the page or in the DOM by the time the code gets executed. Link to comment Share on other sites More sharing options...
Jesdisciple Posted September 7, 2007 Share Posted September 7, 2007 I miss how those lines aren't in a function. Aren't they in movement()? (See my indented version of the code.) Link to comment Share on other sites More sharing options...
smartalco Posted September 7, 2007 Author Share Posted September 7, 2007 ^ya they are, and movement() is called through onLoad on the body tag... (should i put it somewhere else perhaps?)still have no idea Link to comment Share on other sites More sharing options...
Jesdisciple Posted September 9, 2007 Share Posted September 9, 2007 I've modified your script some and imported my own (position.js) so x and y now have values. y_new is always NaN because it is derived from y_vel, which is never defined (as x_vel is).position.js function getPositionOf(element){ var top = 0; var left = 0; if (element.offsetParent){ left = element.offsetLeft top = element.offsetTop while (element = element.offsetParent){ left += element.offsetLeft top += element.offsetTop } } return [left, top];}function setPositionOf2(element, left, top){ element.style.position = 'absolute'; element.style.left = left; element.style.top = top;}function setPositionOf1(element, posArr){ setPositionOf2(element, posArr[0], posArr[1]);}function getCornerOf(element, whichCorner){ var topLeft = getPositionOf(element); var out; switch(whichCorner){ case 'top-left': out = topLeft; break; case 'top-right': out = [topLeft[0] + element.width, topLeft[1]]; break; case 'bottom-left': out = [topLeft[0], topLeft[1] + element.height]; break; case 'bottom-right': out = [topLeft[0] + element.width, topLeft[1] + element.height]; break; default: out = null; } return out;} bouncing.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <link type="text/css" rel="stylesheet" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script src="position.js"></script> <script type="text/javascript"> var gravity = 5 var grav_x = 0 var grav_y = 1 var x_vel=(Math.floor(Math.random()*11)-5) var y_vel var x_new var y_new var x var y var width var height var tvar ballvar posvar outfunction println(str){ out.innerHTML += str + '<br />'}var stp = false; function movement(){ if(stp) return width=window.innerWidth height=window.innerHeight ball=document.getElementById("ball")pos = getPositionOf(ball); x = pos[0] y = pos[1] x_vel=x_vel+(gravity*grav_x) y_vel=y_vel+(gravity*grav_y) println('x_vel = ' + x_vel)println('y_vel = ' + y_vel) x_new=x+x_vel y_new=y+y_vel if (x_new<0) { x_new=0 x_vel=Math.abs(x_vel) } if (x_new>(width-40)) { x_new=width x_vel=-Math.abs(x_vel) } if (y_new<0) { y_new=0 y_vel=Math.abs(y_vel) } if (y_new>(height-40)) { y_new=height y_vel=-Math.abs(y_vel) } ball.style.left=x_new ball.style.top=y_new println('x_new = ' + x_new)println('y_new = ' + y_new) t=setTimeout("movement()",100) } function g_up() { gravity=gravity+3 } function g_down() { gravity=gravity-3 if (gravity<0){ gravity=0 } } function d_up() { grav_x=-1 grav_y=0 } function d_down() { grav_x=1 grav_y=0 } function d_left() { grav_y=-1 grav_x=0 } function d_right() { grav_y=1 grav_x=0 }function startMovement(){ out = document.getElementById('out') movement()}function stopMovement(){ stp = true;} </script> </head> <body onLoad="startMovement()"> <img align="center" src="header.png" /> <div id="controls"> <table align="center"> <tr> <td> </td> <td><img src="up.png" onClick="d_up()" /></td> <td> </td> <td colspan="2" style="width:20px"> </td> <td><img src="up.png" onClick="g_up()" /></td> </tr> <tr> <td><img src="left.png" onClick="d_left()" /></td> <td> </td> <td><img src="right.png" onClick="d_right()" /></td> <td colspan="3"> </td> </tr> <tr> <td> </td> <td><img src="down.png" onClick="d_down()" /></td> <td colspan="3"> </td> <td><img src="down.png" onClick="g_down()" /></td> </tr> </table> <span style="color:#a0a0a0; font-size:.8em">Click the arrows on the left to change the direction of gravity and the arrows on the right to change the strength of gravity.</span> </div> <img src="ball.png" /> <div id="ball"><button onclick="stopMovement()">Stop</button><div id="out"></div> </div> </body></html> The two setPositionOf functions might help you to move the ball. I doubt you'll want getCorner(), as it's just a convenience function for getPositionOf() from another project. But if you do, note that it assumes element's width and height properties to be defined (which caused me grief in that other project). Link to comment Share on other sites More sharing options...
justsomeguy Posted September 10, 2007 Share Posted September 10, 2007 I miss how those lines aren't in a function. Aren't they in movement()? (See my indented version of the code.)Yeah it looks like they are, I missed that with the unformatted code. Link to comment Share on other sites More sharing options...
smartalco Posted September 11, 2007 Author Share Posted September 11, 2007 ok, finally got that working, with modifying to both my parts of the code and yours Jesdiciple, however, it is only working with one odd phenomena, which I have no idea why, it has to have my original code commented out at the top, it won't work otherwise, if i delete the giant comment at the beginning of this then the ball is stationary, does someone have an explanation why? I would rather the code not have a comment that is half of the whole thing... <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><title>Alec Kohl</title><link type="text/css" rel="stylesheet" href="style.css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script src="position.js"></script><script type="text/javascript">var gravity=2var grav_x=0var grav_y=1var x_vel=(Math.floor(Math.random()*11)-5)var y_vel=(Math.floor(Math.random()*11)-5)var x_newvar y_newvar xvar yvar widthvar heightvar tvar ballvar posvar outfunction movement(){width=window.innerWidthheight=window.innerHeightball=document.getElementById("ball")pos = getPositionOf(ball);x = pos[0]y = pos[1]x_vel=x_vel+(gravity*grav_x)y_vel=y_vel+(gravity*grav_y)x_new=x+x_vely_new=y+y_velif (x_new<0) { x_new=0 x_vel=abs(x_vel)}if (x_new>(width-40)) { x_new=width-40 x_vel=-(abs(x_vel))}if (y_new<0) { y_new=0 y_vel=abs(y_vel)}if (y_new>(height-40)) { y_new=height-40 y_vel=-(abs(y_vel))}ball.style.left=x_newball.style.top=y_new//document.write(x_new)//document.write(y_new)t=setTimeout("movement()",10)}function g_up() { gravity=gravity+3}function g_down() { gravity=gravity-3 if (gravity<0){ gravity=0 }}function d_up() { grav_x=0 grav_y=-1}function d_down() { grav_x=0 grav_y=1}function d_left() { grav_y=-1 grav_x=0}function d_right() { grav_y=1 grav_x=0}function startMovement(){out = document.getElementById('out')movement()}</script></head><body onLoad="startMovement()"><img align="center" src="header.png" /><div id="controls"><table align="center"> <tr> <td> </td> <td><img src="up.png" onClick="d_up()" /></td> <td> </td> <td colspan="2" style="width:20px"> </td> <td><img src="up.png" onClick="g_up()" /></td> </tr> <tr> <td><img src="left.png" onClick="d_left()" /></td> <td> </td> <td><img src="right.png" onClick="d_right()" /></td> <td colspan="3"> </td> </tr> <tr> <td> </td> <td><img src="down.png" onClick="d_down()" /></td> <td colspan="3"> </td> <td><img src="down.png" onClick="g_down()" /></td> </tr></table><span style="color:#a0a0a0; font-size:.8em">Click the arrows on the left to change the direction of gravity and the arrows on the right to change the strength of gravity.</span></div><div id="ball"><img src="ball.png" /><div id="out"></div></div></body></html> --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><title>Alec Kohl</title><link type="text/css" rel="stylesheet" href="style.css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script src="position.js"></script><script type="text/javascript">var gravity = 1var grav_x = 0var grav_y = 1var x_vel=(Math.floor(Math.random()*11)-5)var y_vel=(Math.floor(Math.random()*11)-5)var x_newvar y_newvar xvar yvar widthvar heightvar tvar ballvar posvar out/*function println(str){out.innerHTML += str + '<br />'}*/function movement(){//document.write(x_vel)//document.write(y_vel)width=window.innerWidthheight=window.innerHeightball=document.getElementById("ball")pos = getPositionOf(ball);x = pos[0]y = pos[1]x_vel=x_vel+(gravity*grav_x)y_vel=y_vel+(gravity*grav_y)//println('x_vel = ' + x_vel)//println('y_vel = ' + y_vel)x_new=x+x_vely_new=y+y_velif (x_new<0) {x_new=0x_vel=Math.abs(x_vel)}if (x_new>(width-40)) {x_new=width-40x_vel=-Math.abs(x_vel)}if (y_new<0) {y_new=0y_vel=Math.abs(y_vel)}if (y_new>(height-40)) {y_new=height-40y_vel=-Math.abs(y_vel)}ball.style.left=x_newball.style.top=y_new//println('x_new = ' + x_new)//println('y_new = ' + y_new)t=setTimeout("movement()",20)}function g_up() {gravity=gravity+.5}function g_down() {gravity=gravity-.5if (gravity<0){gravity=0}}function d_up() {grav_x=0grav_y=-1}function d_down() {grav_x=0grav_y=1}function d_left() {grav_x=-1grav_y=0}function d_right() {grav_x=1grav_y=0}function startMovement(){out = document.getElementById('out')movement()}</script></head><body onLoad="startMovement()"><img align="center" src="header.png" /><div id="controls"><table align="center"><tr><td> </td><td><img src="up.png" onClick="d_up()" /></td><td> </td><td colspan="2" style="width:20px"> </td><td><img src="up.png" onClick="g_up()" /></td></tr><tr><td><img src="left.png" onClick="d_left()" /></td><td> </td><td><img src="right.png" onClick="d_right()" /></td><td colspan="3"> </td></tr><tr><td> </td><td><img src="down.png" onClick="d_down()" /></td><td colspan="3"> </td><td><img src="down.png" onClick="g_down()" /></td></tr></table><span style="color:#a0a0a0; font-size:.8em">Click the arrows on the left to change the direction of gravity and the arrows on the right to change the strength of gravity.</span></div><div id="ball"><img src="ball.png" /><div id="out"></div></div></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted September 11, 2007 Share Posted September 11, 2007 The best way to debug this is to either use alert boxes or print statements all over the place to show you what the values of all of the variables are, or you might also be able to find a debugger where you could watch variables. Either way, trace through the code and look at the calculations to figure out where it's going wrong, most like something is undefined at some point that shouldn't be. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.