Having OOP problems

**aloosepanda** · Sep 20, 2006, 18:35

Hey guys. I just found sitepoint and its niice (good articles). Anyways, I would appreciate any help I can get. I just learned OOP and I am blown away. I like it. I am trying to make an animation script just for fun (not going to use the libraries available out there yet). I keep getting an error. I made this function called animate and it take 3 parameters:

id
prop
target_value

I think the main problem is the nested function. I am trying to do something recursive here within the function. I don't think I am passing the values back. Please help - I think I am stomped.

HTML Code:

<html>
<style>
body {
	font-family:Century Gothic;
	font-size:12px;
}
#test_box {
	padding:5px;
	height:150px;
	width:150px;
	border:1px solid gray;
	position:absolute;
	top:50px;
}
</style>
<script src="prototype.js" type="text/javascript"></script>
<script language="javascript">
	function getStyle(id, prop) {
		var obj = document.getElementById(id);
		if (obj.currentStyle)
			var curr_value = obj.currentStyle[prop];
		else if (window.getComputedStyle)
			var curr_value = document.defaultView.getComputedStyle(obj,null).getPropertyValue(prop);
		return curr_value;
	}
	
	function animate(id, prop, target_value) {
		this.id = id;	// Object id to be moved
		this.prop = prop;	// Object style to be changed
		this.target_value = target_value;	// Resulting value
		this.obj = $(this.id);	// Reference the object
		
		this.move = function () {	// Submethod to move
			var current_value = $(this.id).offsetLeft;
			$('curr_value').innerHTML = current_value;
			
			if (this.target_value < current_value) {
				// alert("target value is less than current value");
			} else if (this.target_value > current_value) {
				$('test_box').style.left = parseInt(current_value) + 10 + 'px';
				t = setTimeout(this.move(), 100);
			} else if (this.target_value == current_value) {
				clearTimeout(t);
			}
		}
		
		this.resize = function () { // Submethod being developed
		}
	}	
</script>
</head>

<body>
	<input type="button" value="get value" onclick="alert(getStyle('test_box', 'left'));" />
	
	<input type="button" value="move left" onclick="move1 = new animate('test_box', 'left', 500); move1.move();" />

	<p><div id="test_box">
		This is a test box.
	</div>
	
	<div style="position:absolute; bottom:5px; left:5px;">
		<table>
			<tr>
				<td>left</td>
				<td id="curr_value"></td>
			</tr>
		</table>
	</div>
</body>
</html>

**jtrelfa** · Sep 21, 2006, 04:22

Get rid of your "this" direct reference. "this" refers to something else once you've instantiated the class. Change it around so that you create an internal var that references "this":

Code:

var me = this;

Then throughout your animate object, use "me" instead of "this"

Code:

var animate = function(id, prop, target_value) { 
	var me = this;
	me.id = id; // Object id to be moved 
	me.prop = prop; // Object style to be changed 
	me.target_value = target_value; // Resulting value 
	me.obj = $(id); // Reference the object 
	me.move = function() {
		var current_value = me.obj.offsetLeft; 
		$('curr_value').innerHTML = current_value; 
		if (me.target_value < current_value) { // 
			//alert("target value is less than current value"); 
		} else if (me.target_value > current_value) { 
			$('test_box').style.left = parseInt(current_value) + 10 + 'px';
			t = setTimeout(me.move, 100);
		} else if (me.target_value == current_value) { 
			clearTimeout(t); 
		} 
	};
}

You'll also notice that I removed the parentheses from the setTimeout function.

HTH,

Jon

**aloosepanda** · Sep 21, 2006, 18:57

pretty cool. thanks man. i see you declared an instance within the function. ok ok. now time to add some calc equations to the speed.

The SitePoint Forums have moved.

User Tag List

Thread: Having OOP problems

Thread Tools

Display

Having OOP problems

Bookmarks

Bookmarks

Posting Permissions