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>
<a href="#" onClick="testCycler.moveForward();">forward --*</a>
<div name="testy" id="testy">
asdlfkjasdflkjasdlf
</div>
</body>
</html>
