...

View Full Version : Class Object and scope problems with return values



thephatp
10-18-2005, 01:28 PM
Hi everyone, as you can probably tell, I'm new to this forum, and for the record, I'm pretty new at web development as well. I'm having a scope problem, and I haven't been able to find the answer on the forum yet, so I hope this is not a repost.

I create a new object class and build up some html. This occurs in a .js file. In my HTML file, I import the JS source file, as would be expected. I can create the object, but I can't seem to get the return value from one of the functions.

So here's the example (Class Foo, error occurs at getHTML):

function Foo( a , b )
{
this.a = a ;
this.b = b ;

this.html = new String( "" ) ;

this.makeSomeHtml = function()
{
this.html += "<html><body>hello world</body></html>" ;
}

this.getHTML = function()
{
return this.html ;
}
}

// I've even tried this, but no luck
function tryToGetMyHTML( a , b )
{
var myFoo = new Foo( a , b ) ;
myFoo.makeSomeHtml() ;

var str = myFoo.getHTML() ;

alert( str ) ; // no luck here; already out of scope

return str ;
}

Ok, so the HTML looks something like this:
<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript" src="Foo.js"></script>
</HEAD>
<BODY>
<table><tr><td onmouseover="tryToGetMyHTML( 'val1' , 'val2' );">test</td></tr></table>
</BODY>
</HTML>


Any help? It's really hard to find something online about javascript classes, much less scope and how to deal with this.

In short: I need to create an object. Then I need to get a return value (a String) from that object by calling a function within the object.

Any help at all is GREATLY APPRECIATED!!!!! :)

Thanks!

rm-f
10-18-2005, 07:47 PM
what is the problem, your example works in FF1.0.7 and IE6

KC-Luck
10-18-2005, 07:49 PM
What browser does this fail in?

<HTML>
<HEAD>
<script type="text/javascript">

function Foo(a, b) {
this.a = a;
this.b = b;
this.html = new String();
this.makeSomeHtml = function() {this.html += "<html><body>hello world</body></html>";}
this.getHTML = function() {return this.html;}
}

function tryToGetMyHTML(a, b) {
var myFoo = new Foo(a, b);
myFoo.makeSomeHtml();
var str = myFoo.getHTML();
alert( str ); // worked fine for me!
return str;
}

</script>
</HEAD>
<BODY>
<table><tr><td onmouseover="tryToGetMyHTML('val1','val2');">test</td></tr></table>
</BODY>
</HTML>
worked fine in IE 6 and Firefox 1.0.6 ??

thephatp
10-18-2005, 10:22 PM
sorry, this was a bad example; I tried it and it worked for me as well. I'm trying to compare my code right now with what I have done here, and I'll see if I can post something more like what I'm doing. I can't just post all of the code b/c there is a LOT to it.

Thanks for the responses. I'll post within the next couple of hours a better example (and one that won't work ;) ).

thephatp
10-18-2005, 11:52 PM
Ok, this should do it.

Here is what I created, which very closely mimics what I'm really trying to do. It does not work as is. Let me know what's wrong. I've tried to find gool tutorials on classes and scope in Javascript, but nothing too helpful yet.

Thanks for the help!

FYI: It craps out after the alert( "4" ) because after that alert is the first time I try to reference a variable from the class.

foo.js

function Foo ()
{
alert( "-1" ) ;
this.dummyStr = new String( "" ) ;
this.dummyDate = new Date() ;
this.dummyArray = [ "1" , "2" , "3" , "4" , "5" , "6" ] ;

this.dummyDate.setDate( 1 ) ;
this.html = new String( "" ) ;
alert( "0" ) ;

createPage() ;
}

function startPage()
{
alert( "1" ) ;
this.html += "<HTML>\n" ;
}

function startHeader()
{
alert( "2" ) ;
this.html += "<Head>\n" ;
}

function endHeader()
{
alert( "3" ) ;
this.html += "</Head>\n" ;
}

function createBody()
{
alert( "4" ) ;
this.html += "<body>\n" ;

for( var i = 0 ; i < this.dummyArray.length() ; ++i )
{
this.html += this.dummyArray[i] ;
}

this.html += "\n" ;

this.html += this.dummyDate.getUTCDate() ;

this.html += "</body>\n" ;
alert( "4.b" ) ;
}

function endPage()
{
alert( "5" ) ;
this.html += "</HTML>\n" ;
}

function createPage()
{
alert( "creating page" ) ;
startPage() ;
startHeader() ;
endHeader() ;
createBody() ;
endPage() ;
}

function getHtml()
{
alert( "trying to get html from class Foo..." ) ;
alert( "this.html = " + this.html ) ;
return this.html ;
}




testFoo.html

<html>

<head>
<script type="text/javascript" language="JavaScript" src="foo.js"></script>
<script type="text/javascript" language="JavaScript">

function testFoo()
{
var foo = new Foo() ;
var str = new String( "" ) ;

str = foo.getHtml() ;
alert( "testFoo.str = " + str ) ;
}

</script>
</head>

<body bgcolor="#ffffff">
<a href="javascript:testFoo()">testing</a>
</body>

</html>

thephatp
10-18-2005, 11:59 PM
I've also tried these things, and still now luck.

Change:

Added the vars outside of the class to try to make the global to the file.
var dummyStr ;
var dummyDate ;
var dummyArray ;
var html ;

function Foo()
{
...
...
}

Result:

Same problem. Nothing after alert( "4" ).

Change:

Same as above, but took off the 'var' before each one to make them static (doesn't that make them static?).

dummyStr ;
dummyDate ;
dummyArray ;
html ;

function Foo()
{
...
...
}

Result:

Same problem. Nothing after alert( "4" ).


Change:

Same as above, except I tried to initialize them before the class call.
dummyStr = new String( "" ) ;
dummyDate = new Date( "" ) ;
dummyArray = new Array( 6 ) ;
html = new String( "" ) ;

function Foo()
{
...
...
}

Result:

Same problem. Nothing after alert( "4" ).

thephatp
10-19-2005, 12:13 AM
Here's another thing that I tried:

I moved all of the function INTO the definition of Foo.

So now, foo.js looks like this:

function Foo ()
{
alert( "-1" ) ;
this.dummyStr = new String( "" ) ;
this.dummyDate = new Date() ;
this.dummyArray = [ "1" , "2" , "3" , "4" , "5" , "6" ] ;

this.dummyDate.setDate( 1 ) ;
this.html = new String( "" ) ;
alert( "0" ) ;


this.startPage = function() { alert( "1" ) ; this.html += "<HTML>\n" ; }
this.startHeader = function() { alert( "2" ) ; this.html += "<head>\n" ; }
this.endHeader = function() { alert( "3" ) ; this.html += "</head>\n" ; }
this.createBody = function()
{
alert( "4" ) ;
this.html += "<body>\n" ;
for( var i = 0 ; i < this.dummyArray.length() ; ++i )
{
this.html += this.dummyArray{ i } ; // these are really straight brackets, but that makes everything italics.
}
this.html += "\n" ;
this.html += this.dummyDate.getUTCDate() ;
this.html += "</body>\n" ;
alert( "4.b" ) ;
}
this.endPage = function() { alert( "5" ) ; this.html += "</HTML>\n" ; }
this.getHtml = function() { alert( "Trying to get html..." ) ; return this.html ;
}

this.createPage = function()
{
alert( "creating page" ) ;
startPage() ;
startHeader() ;
endHeader() ;
createBody() ;
endPage() ;
}
}



The function in the testFoo.html file now looks like this:

function testFoo()
{
var foo = new Foo() ;
var str = new String( "" ) ;

foo.createPage() ;
str = foo.getHtml() ;
alert( "testFoo.str = " + str ) ;
}




The error occurs now at alert( "create page" ).

Now change all of the function calls in the this.createPage function. So now everything above stays the same except this.createPage = function() looks like this:

this.createPage = function()
{
alert( "creating page" ) ;
this.startPage() ;
this.startHeader() ;
this.endHeader() ;
this.createBody() ;
this.endPage() ;
}


And with that, I'm back where I started, where I get to alert( "4" ), but nothing past there.


ANY HELP??? Thanks!

KC-Luck
10-19-2005, 06:01 AM
this works for IE 6 + FX 1.0.6

<html>
<head>
<script>

function Foo() {
this.dummyStr = new String;
this.dummyDate = new Date;
this.dummyArray = [1, 2, 3, 4, 5, 6];
this.dummyDate.setDate(1);
this.html = new String;
}
Foo.prototype = {
startPage: function() {this.html += '<html>';},
startHeader: function() {this.html += '<head>';},
endHeader: function() {this.html += '</head>';},
createBody: function() {
this.html += '<body>';
for (var i = 0; i < this.dummyArray.length; i++)
this.html += this.dummyArray[i];
this.html += '\n'+ this.dummyDate.getUTCDate();
this.html += '</body>';
},
endPage: function() {this.html += '</html>';},
getHTML: function() {return this.html;},
createPage: function() {
this.startPage();
this.startHeader();
this.endHeader();
this.createBody();
this.endPage();
}
}

onload = function() {
var foo = new Foo;
foo.createPage();
document.getElementById('out').value = foo.getHTML();
}

</script>
</head>
<body>
<textarea id="out" style="width:100%;height:100%;"></textarea>
</body>
</html>
and you should really wrap your code w/ the CODE tag, th # sign thingy during posting.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum