Member Avatar for lifeworks

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 because: revised the code
  • 5 Contributors
  • 6 Replies
  • 163 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by stultuske

Recommended Answers

All 6 Replies

Member Avatar for scrappedcola

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.

Member Avatar for lifeworks

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...

Member Avatar for lifeworks

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?!

Member Avatar for bderooms

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

Member Avatar for Airshow

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

Member Avatar for stultuske

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 ..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.