0

Hi

Ive been fiddling with trying to emulate classes in javascript - but currently getting an undefined error hen I click one of the vote buttons...

Ive got two vote buttons, 'vote_positive' and 'vote_negative' and have cretaed two vote button objects... on construction they firstly assign a value to the vote, then provide a 'method' which will ultimately be an ajax call, but for now is just an alert...

function vote_button(val){
	this.value = val;
	this.vote = function(){
		alert(this.value);
	};
}

function configure_voting(){
	var voteUp = new vote_button(1);
	var voteDown = new vote_button(-1);

	$('vote_positive').onclick = voteUp.vote;
	$('vote_negative').onclick = voteDown.vote;
}

function init(){
	configure_voting();
}

window.onload = init;

Basically, the alert tries to access that objects 'value' variable... but for some reason it cant find it?!

Help!

Edited by lifeworks: revised the code

5
Contributors
6
Replies
7
Views
7 Years
Discussion Span
Last Post by stultuske
0

From the code provided I saw a few things that weren't working for me. In the config function where you are assigning the onclick events it looks like you are attempting to use jQuery to grab the elements. I don't know if you are grabbing by class name or by id but neither does jQuery. You need to select the elements with either the "." or "#" to indicate the selection. I used anchors with id's of vote_positive and vote_negative so that is what my example will use. Also if you are going to use jQuery like this you might as well use the click function provided by jQuery. If not then just use document.getElementById. I will provide code for both.
Here is what I did to get it to work:

<html>
<head>
<script src="../lib/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
function vote_button(val){
	this.value = val;
	
	this.vote = function(){
		alert(this.value);
	};
}
 
function configure_voting(){
	var voteUp = new vote_button(1);
	var voteDown = new vote_button(-1);
 
	$('#vote_positive').click(function(){
		voteUp.vote();
	});
	$('#vote_negative').click(function(){
		voteDown.vote();
	});
}
 
function init(){
	configure_voting();
}
 
window.onload = init;
</script>
</head>
<body>
<a href="javascript:void(0)" id="vote_positive">Pos</a>
<a href="javascript:void(0)" id="vote_negative">Neg</a>
</body>
</html>

To just use selecting by Id

document.getElementById("vote_positive").onclick = function(){
   voteUp.vote();
}

When you wrap the function call in a function it seems to work just fine (like what you did with your init function. When you just assign it voteUp.vote you get the value undefined.

0

Hi

Thanks for the input.

Im not using jQuery, just a couple of extras I wrote myself, using ideas Ive seen else where. Such as the $(). Problem with setting

$('vote_positive').onclick = voteUp.vote();

Is that it actually runs the function then... and the onclick event becomes the substance of the vote fn(), not the vote fn()...

Theres something about my objects not remembering that 'this.value' variable - can't work out if its just something like the functions being in the wrong order...

0

I seem to have solved the problem, through trial and error... I adjusted the configure_voting()

function configure_voting(){
	var voteUp = new vote_button(1);
	var voteDown = new vote_button(-1);

	$('vote_positive').onclick = function(){voteUp.vote();};
	$('vote_negative').onclick = function(){voteDown.vote();};
}

Anyone able to tell me why that worked?!

0

Hi,

If I'm not mistaking the same problem and after a while I figured out what the problem was.
Basically if you use a callback voteUp.vote() than the callback it's "this" variable
will be unbound.

To make sure it is passed well there is a method: .bind(this) which you add to the callback to make sure "this" is bound.
so
$('vote_positive').onclick = voteUp.vote;
would become
$('vote_positive').onclick = voteUp.vote.bind(this);

Another explanation can be found in this post:
http://stackoverflow.com/questions/2525808/calling-methods-within-same-javascript-class-prototype

0

If you really want to know about emulating "classes" in javascript, then read this article on Inheritance.

I have read it every 3 months or so for the last 4 years in the hope that it will eventually sink in.

Airshow

0

Hi,

If I'm not mistaking the same problem and after a while I figured out what the problem was.
Basically if you use a callback voteUp.vote() than the callback it's "this" variable
will be unbound.

To make sure it is passed well there is a method: .bind(this) which you add to the callback to make sure "this" is bound.
so
$('vote_positive').onclick = voteUp.vote;
would become
$('vote_positive').onclick = voteUp.vote.bind(this);

Another explanation can be found in this post:
http://stackoverflow.com/questions/2525808/calling-methods-within-same-javascript-class-prototype

considering the last post (before yours) was over a year old, I'm not so sure the OP was still looking for an answer ..

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.