[Javascript] Something better than getElementById

Mon Oct 24 14:02:51 CDT 2005

At 09:02 AM 10/24/2005, Terry Riegel wrote:
>I was able to implement your first suggestion, but I am not clear on 
>how to implement the method that avoids inline scripting. Here is my 
>simplified test page that isn't working. Any Ideas on what I might be missing?
...
>function changestate(evt)
>{
>    // cancel event-bubbling
>    if (evt) { event = evt; }
>    event.cancelBubble = true;
>
>
>    // change class
>    if (this.className.search('nor') == -1)
>     {
>       this.className=this.className.replace('sel','nor');
>     }
>    else
>     {
>       this.className=this.className.replace('nor','sel');
>     }
>}
>
>function Initialize()
>{
>     div.onclick = changestate;
>}
...
><body onload="Initialize()">
>  <div class="nor" id=".TEMP">.TEMP</div>
>  <div class="nor" id="images">images</div>
>  <div class="nor" id="skel">skel</div>
>  <div class="nor" id="users">users</div>
>  <div class="norpri" id="archive.pak">archive.pak</div>
>  <div class="norpub" id="authenticate.html">authenticate.html</div>
></body>
></html>

Terry,

Your Initialize() function doesn't correctly identify an object:

>     div.onclick = changestate;

This would work only if you had an element with the id "div", e.g.:

         <p id="div">

Instead, it looks like you need to loop through all the elements on 
the page that meet certain criteria and assign the onclick behavior 
to each one.  For the moment I'll assume that they're all DIVs and 
they all have classNames beginning with "nor":
____________________________

function Initialize()
{
         // get an array of all DIV elements on the page
         var aEls = document.getElementsByTagName("DIV");

         // loop through them looking for matches
         for (var iEl=0; iEl < aEls.length; iEl++)
         {
                 // check class
                 sClass = aEls[iEl].className;
                         if (sClass.search("^nor") == 0)
                         {
                                 aEls[iEl].onclick = changestate;
                         }
         }
}
____________________________

In sClass.search("^nor") I'm using the regular expression "^nor" in 
which ^ represents the beginning of the string, so it will only find 
nor when it begins a className.  You could also write this as:

         if (sClass.substr(0,3) == "nor")

String.substr() may take fewer milliseconds to execute than 
String.search(RegExp), if as has been suggested the RegExp engine 
takes a few more machine cycles to fire up, but this difference isn't 
going to be humanly perceptible unless you're looping hundreds of times.

Later, when you're replacing "nor" with "sel", I'd likewise use ^ to 
be really specific:

    // change class
    if (this.className.search('^nor') == -1)
     {
       this.className=this.className.replace('^sel','nor');
     }
    else
     {
       this.className=this.className.replace('^nor','sel');
     }

Paul 