Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #17098 > unrolled thread

calling a class prototype function from an onclick event

Back to article view | Back to comp.lang.javascript

Contents

  calling a class prototype function from an onclick event Tom <gigasoftpeople@gmail.com> - 2012-11-09 08:32 -0800
    Re: calling a class prototype function from an onclick event Scott Sauyet <scott.sauyet@gmail.com> - 2012-11-09 11:06 -0800
    Re: calling a class prototype function from an onclick event Tom <gigasoftpeople@gmail.com> - 2012-11-09 15:08 -0800
    Re: calling a class prototype function from an onclick event Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-11-10 11:45 +0100
      Re: calling a class prototype function from an onclick event John G Harris <john@nospam.demon.co.uk> - 2012-11-11 11:39 +0000

#17098 — calling a class prototype function from an onclick event

Hi All,

I have a problem that I need help solving. I have a class that implements an onclick event on an element within an html document. The problem is that I have to call a member function within the class object. While I can access all of the class variables I cannot access the prototyped functions for that class. Does anybody have a work around or a suggestion? Below is an example where I have tried to remove all the fluff from the object to show the nuts and bolts of what I am trying to do. Any suggestions would be greatly appreciated.

The problem area is in function ratings.prototype.addData.

Thanks in advance.

Cheers, Tom


function ratingObject(objName, obj)
{
	this.objName = objName;	// name
	this.obj = obj;			// obj
}

var ratingObjectManager = {
	objects: new Array(),
	debug: true,
	add: function(title, obj)
	{
		var o = new ratingObject(title, obj);
		this.objects.push(o);
		
	},
	findObj: function(title)
	{
		for(var i = 0; i < this.objects.length; i++)
		{
			var s1 = title;
			var s2 = this.objects[i].objName;
			
			if(s1.length == s2.length)
			{
				if(s1.indexOf(s2) != -1)
				{
					return this.objects[i];
				}
			}
		}
		return null;
	}
}

function ratings()
{
	this.html = '';
}

ratings.prototype.addData = function(title) 
{
	try
	{
		var that = this;
		span.onclick = 
			function(e)
			{
				try
				{
					
					if(!e) e = window.event;
					
					var element = e.target || e.srcElement;
			  		var clickCallback = ratingObjectManager.findObj(title);
			  		
			  		alert(clickCallback.toSource()); // diplay member variables and proper content
			  		clickCallback.saveHTML(element.innerHTML); // ***** >>> fails with this
			  		that.saveHTML(element.innerHTML); // **** >>> and also will fail with this
				
				
				}
				catch(e)
				{
					alert(e);
				}
    		
    		
  			}
  		
  	}
	catch(e)
	{
    	alert(e);
	}
}

// sends data to PHP and receives the response
ratings.prototype.saveHTML = function(html) 
{
	alert('we are here');
}

var o = new ratings();
ratingObjectManager.add(title, o);

[toc] | [next] | [standalone]

#17103

Tom wrote:
> I have a problem that I need help solving. I have a class that
> implements an onclick event on an element within an html document.
> The problem is that I have to call a member function within the
> class object. While I can access all of the class variables I
> cannot access the prototyped functions for that class. Does
> anybody have a work around or a suggestion? Below is an example
> where I have tried to remove all the fluff from the object to show
> the nuts and bolts of what I am trying to do. Any suggestions
> would be greatly appreciated.

First of all, your code really should be formatted to something more
readable on USENET, ideally under 72 columns, certainly no more than
80.  This is very hard to read.

    <http://jibbering.com/faq/#posting>

I'm not going to quote the code here.  But I believe I do see your
issue.  Your `ratingObjectManager.findObj` function is returning an
object created by the constructor function `ratingObject`.  (This
really should be capitalized as `RatingObject` if you plan on using it
as a constructor.)  Then you are trying to treat that return object
(`clickCallback`) as though it had been created by your `rating`
constructor.

I think you may have removed some of the code that would let me be
sure, but do you simply need to do this instead?:

    clickCallback.obj.saveHTML(element.innerHTML);
                 ^^^^

HTH,

  -- Scott

[toc] | [prev] | [next] | [standalone]

#17108

On Friday, November 9, 2012 10:32:59 AM UTC-6, Tom wrote:
> Hi All,
> 
> 
> 
> I have a problem that I need help solving. I have a class that implements an onclick event on an element within an html document. The problem is that I have to call a member function within the class object. While I can access all of the class variables I cannot access the prototyped functions for that class. Does anybody have a work around or a suggestion? Below is an example where I have tried to remove all the fluff from the object to show the nuts and bolts of what I am trying to do. Any suggestions would be greatly appreciated.
> 
> 
> 
> The problem area is in function ratings.prototype.addData.
> 
> 
> 
> Thanks in advance.
> 
> 
> 
> Cheers, Tom
> 
> 
> 
> 
> 
> function ratingObject(objName, obj)
> 
> {
> 
> 	this.objName = objName;	// name
> 
> 	this.obj = obj;			// obj
> 
> }
> 
> 
> 
> var ratingObjectManager = {
> 
> 	objects: new Array(),
> 
> 	debug: true,
> 
> 	add: function(title, obj)
> 
> 	{
> 
> 		var o = new ratingObject(title, obj);
> 
> 		this.objects.push(o);
> 
> 		
> 
> 	},
> 
> 	findObj: function(title)
> 
> 	{
> 
> 		for(var i = 0; i < this.objects.length; i++)
> 
> 		{
> 
> 			var s1 = title;
> 
> 			var s2 = this.objects[i].objName;
> 
> 			
> 
> 			if(s1.length == s2.length)
> 
> 			{
> 
> 				if(s1.indexOf(s2) != -1)
> 
> 				{
> 
> 					return this.objects[i];
> 
> 				}
> 
> 			}
> 
> 		}
> 
> 		return null;
> 
> 	}
> 
> }
> 
> 
> 
> function ratings()
> 
> {
> 
> 	this.html = '';
> 
> }
> 
> 
> 
> ratings.prototype.addData = function(title) 
> 
> {
> 
> 	try
> 
> 	{
> 
> 		var that = this;
> 
> 		span.onclick = 
> 
> 			function(e)
> 
> 			{
> 
> 				try
> 
> 				{
> 
> 					
> 
> 					if(!e) e = window.event;
> 
> 					
> 
> 					var element = e.target || e.srcElement;
> 
> 			  		var clickCallback = ratingObjectManager.findObj(title);
> 
> 			  		
> 
> 			  		alert(clickCallback.toSource()); // diplay member variables and proper content
> 
> 			  		clickCallback.saveHTML(element.innerHTML); // ***** >>> fails with this
> 
> 			  		that.saveHTML(element.innerHTML); // **** >>> and also will fail with this
> 
> 				
> 
> 				
> 
> 				}
> 
> 				catch(e)
> 
> 				{
> 
> 					alert(e);
> 
> 				}
> 
>     		
> 
>     		
> 
>   			}
> 
>   		
> 
>   	}
> 
> 	catch(e)
> 
> 	{
> 
>     	alert(e);
> 
> 	}
> 
> }
> 
> 
> 
> // sends data to PHP and receives the response
> 
> ratings.prototype.saveHTML = function(html) 
> 
> {
> 
> 	alert('we are here');
> 
> }
> 
> 
> 
> var o = new ratings();
> 
> ratingObjectManager.add(title, o);

Scott thanks for your response. I found the issue at this very moment actually.

In my find method I had "return this.objects[i];" and it should have been "return this.objects[i].obj;"

Sometimes it just takes stepping back and looking at the complete picture. :-)

Again thanks for your reply.

[toc] | [prev] | [next] | [standalone]

#17117

Tom wrote:

> I have a problem that I need help solving. I have a class that implements
> an onclick event on an element within an html document. The problem is
> that I have to call a member function within the class object. While I can
> access all of the class variables I cannot access the prototyped functions
> for that class. Does anybody have a work around or a suggestion? Below is
> an example where I have tried to remove all the fluff from the object to
> show the nuts and bolts of what I am trying to do. Any suggestions would
> be greatly appreciated.

Your problem appears to be solved, so eventually you should know that there 
are no classes.  So there are no class objects, class variables, or member 
functions in these programming languages.  They use prototype-based, not 
class-based, inheritance.  There are constructors, constructor properties 
(properties of constructors), and prototype methods (methods of prototype 
objects).

> The problem area is in function ratings.prototype.addData.

See?  No classes, but prototype objects (here: referred by 
`ratings.prototype') attached to constructors (here: referred by `ratings') 
instead, from which other objects inherit.

Because `ratings' refers to a constructor, the identifier should be 
`Ratings' instead.


PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

[toc] | [prev] | [next] | [standalone]

#17161

On Sat, 10 Nov 2012 at 11:45:26, in comp.lang.javascript, Thomas
'PointedEars' Lahn wrote:

  <snip>
>They use prototype-based, not
>class-based, inheritance.
  <snip>

One day, perhaps, Thomas will tell us what he means by "class-based".

Having done that he can tell us why the mechanics of implementing
inheritance by a typical C++ compiler is so similar to the mechanics of
implementing inheritance by a typical ECMAScript compiler/translator.
Then he can persuade us that it's a complete coincidence.

  John
-- 
John Harris

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web