By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,016 Members | 2,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,016 IT Pros & Developers. It's quick & easy.

simple javascript problems

P: n/a
Hi,

I am relatively new to javascript, and I am having issues with using the
document.getElementById function. I am building a class and in the
constructor, I associate the object to an element in the page by passing
the string id of the element into the constructor function. Then I
assign this.element = document.getElementById(the string). However,
when I try to access this.element, the console tells me it has no
properties. I have tried to use the getElementById elsewhere in the page
to fix the problem, but it won't recognize the element IDs. I am not
sure what i am doing wrong! I appreciate any help that can be given.
Below is the test page with code. Thanks!

-Kirk

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<script language="JavaScript" type="text/javascript">

function textCycler(elementID){//constructor for textCycler
this.element = document.getElementById(elementID);//document
element in which text will be cycled
this.text = new Array();//text array
this.pages = 0;//count of pages of text
this.textPointer = -1;//points to currently viewed text in text array
}

textCycler.prototype.getCurrentText = function(){
return (this.textPointer==-1)? ("") : this.text[this.textPointer];
}

textCycler.prototype.update = function(){
this.element.innerHTML = this.getCurrentText();
}

textCycler.prototype.moveForward = function(){
if(this.pages > 0){
this.textPointer = (this.textPointer + 1) % this.pages;
this.update();
}
alert(this.textPointer);
}

textCycler.prototype.moveBackward = function(){

if(this.pages > 0){
this.textPointer = (this.textPointer == 0)? (this.pages - 1) :
(this.textPointer - 1);
this.update();
}

}

textCycler.prototype.loadText = function(textArray){
this.text = textArray;
this.pages = this.text.length;
this.textPointer = 0;
}

textCycler.prototype.loadFirst = function(){

if(this.pages > 0 && this.textPointer > -1){
this.textPointer = 0;
this.update();
}

}
testArray = ["a","b","c","d","e","f"];
testCycler = new textCycler('testy');
testCycler.loadText(testArray);
testCycler.loadFirst();
//alert(document.getElementById("testy").innerHTML);
</script>
<body>
<a href="#" onClick="testCycler.moveBackward();">*--back</a>&nbsp;
&nbsp; <a href="#" onClick="testCycler.moveForward();">forward --*</a>
<div name="testy" id="testy">
asdlfkjasdflkjasdlf
</div>
</body>
</html>
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Hi Kirk,

First of all, this is why your script doesn't work. You are trying to
create an object with an elementID that does not exist. I know you can
see that it exists, but the browser has yet to see it. The browser is
busy executing your script. Only after it has finished rendering the
page, does it know that the elementID exists when you do a
document.getElementById() call.

Second, don't use objects in your event handler. i.e. onClick =
"obj.method", because it does not know what obj is. This mainly has to
do with scoping. Instead make a generic function which invokes that
object's method:

<a href = "#" onClick = "moveBackward();">back</a>
<a href = "#" onClick = "moveForward();">forward</a>

In your script:

function moveBackward()
{
testCycler.moveBackward();
}

function moveForward()
{
testCycler.moveForward();
}

Finally, to fix your problem, do the following instead:
var testCycler;

function init()
{
testCycler = new textCycler('testy');
testCycler.loadText(testArray);
testCycler.loadFirst();
}

window.onload = init;

This way after the page has loaded you can guarantee that the call for
document.getElementById() will work.

Hope this helps. :)

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.