simple javascript problems

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Kirk Soodhalter
    #1

    simple javascript problems

    Hi,

    I am relatively new to javascript, and I am having issues with using the
    document.getEle mentById 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.getEle mentById(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="JavaS cript" type="text/javascript">

    function textCycler(elem entID){//constructor for textCycler
    this.element = document.getEle mentById(elemen tID);//document
    element in which text will be cycled
    this.text = new Array();//text array
    this.pages = 0;//count of pages of text
    this.textPointe r = -1;//points to currently viewed text in text array
    }

    textCycler.prot otype.getCurren tText = function(){
    return (this.textPoint er==-1)? ("") : this.text[this.textPointe r];
    }

    textCycler.prot otype.update = function(){
    this.element.in nerHTML = this.getCurrent Text();
    }

    textCycler.prot otype.moveForwa rd = function(){
    if(this.pages > 0){
    this.textPointe r = (this.textPoint er + 1) % this.pages;
    this.update();
    }
    alert(this.text Pointer);
    }

    textCycler.prot otype.moveBackw ard = function(){

    if(this.pages > 0){
    this.textPointe r = (this.textPoint er == 0)? (this.pages - 1) :
    (this.textPoint er - 1);
    this.update();
    }

    }

    textCycler.prot otype.loadText = function(textAr ray){
    this.text = textArray;
    this.pages = this.text.lengt h;
    this.textPointe r = 0;
    }

    textCycler.prot otype.loadFirst = function(){

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

    }
    testArray = ["a","b","c","d" ,"e","f"];
    testCycler = new textCycler('tes ty');
    testCycler.load Text(testArray) ;
    testCycler.load First();
    //alert(document. getElementById( "testy").innerH TML);
    </script>
    <body>
    <a href="#" onClick="testCy cler.moveBackwa rd();">*--back</a>&nbsp;
    &nbsp; <a href="#" onClick="testCy cler.moveForwar d();">forward --*</a>
    <div name="testy" id="testy">
    asdlfkjasdflkja sdlf
    </div>
    </body>
    </html>
    Tags: None
    • web.dev
      #2
      Re: simple javascript problems

      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.getEle mentById() 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.move Backward();
      }

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

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

      function init()
      {
      testCycler = new textCycler('tes ty');
      testCycler.load Text(testArray) ;
      testCycler.load First();
      }

      window.onload = init;

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

      Hope this helps. :)

        Comment

        Previous template Next
        Working...