Jump to content

getElementById problems (left style attribute)


smartalco
 Share

Recommended Posts

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

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

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...