[Javascript] Javascript arrays

[Paul Novitski]

Terry,

I can't guess your exact situation without seeing the html that accompanies 
your script, but here are a few initial suggestions anyway:
_______________________

Remove the period from your element's id (".TEMP").  Element ids & names 
must begin with [A-Za-z], and although periods are permitted by the W3C 
spec I'd think they would quickly snarl up your DOM scripting, in which 
period-delimited nodes are commonplace: "document.mainform.pswd.value" etc.
http://www.w3.org/TR/1998/REC-html40-19980424/types.html#type-name
_______________________

What role does the 'type' argument have in function 
changedest(dest,type)?  I don't see it used in the function's body.
_______________________

Rather than explictly changing an element's backgroundColor in Javascript, 
I recommend that you change its className instead, and set the color 
specifics in your stylesheet.  If you can confine as many of your stylistic 
effects as possible to css, you'll always know where to go to tweak the 
cosmetic and you won't have to worry about css/javascript conflicts.
_______________________

In your function deselect() you're changing the backgroundColor of three 
elements.  Since each element has a unique id you could use CSS instead of 
Javascript:

         #TEMP, #app, #apps
         {
                 background-color: #ffffff;
         }
_______________________

If you do need Javascript, I'd use it to change their className and let CSS 
handle the color:

         var td = document.getElementById('TEMP');
         td.classNamne = "cssSelected";
         var td = document.getElementById('app');
         td.classNamne = "cssSelected";
         var td = document.getElementById('apps');
         td.classNamne = "cssSelected";

and then in your stylesheet:

         .cssSelected
         {
                 background-color: #ffffff;
         }
_______________________

If those three elements are all children of the same container, I'd 
consider changing its className instead, effectively changing all three 
elements with one blow:

         <tr id="things">
                 <td id="TEMP" ...
                 <td id="app" ...
                 <td id="apps" ...
         </tr>

and then:

         var oThings = document.getElementById("things");
         oThings.className = "cssSelected";

Or if the parent isn't named, find it through one of its children:

         var oThing = document.getElementById("TEMP");
         oThing.parentNode.className = "cssSelected";
_______________________

To handle your problem of the list's state and color getting out of synch, 
I'd consider assigning a click or change event to the list:

         <select onclick="jsToggleList();" ...

and then something like:

         function jsToggleList()
         {
         var oListbox = document.getElementById('listbox');

                 // if nothing is selected...
                 if (this.selectedIndex < 0)
                 {
                         oListbox.className = "cssIdle"
                 } else {
                         oListbox.className = "cssSelected"
                 }
         }

(or whatever other mechanism you've devised to determine state)
_______________________

Cheers,
Paul



At 03:30 AM 5/6/2004, Terry Riegel wrote:
>Hello,
>
>I am new to javascript and would like to convert my code from a brute 
>force method to a simpler method. I hope someone can help me out.
>
>First let me say I am very inexperienced in Javascript, not programming. 
>So consequently I can understand concepts pretty well, but struggle with 
>the simple syntax issues.
>
>Here is part of the function:
>
>function changedest(dest,type)
>{
>   var td = document.getElementById(dest);
>   if (td.style.backgroundColor == '#BFD7FF')
>    {
>      td.style.backgroundColor = '#FFFFFF';
>      document.browseform["fm_list"].value = 
> document.browseform["fm_list"].value.replace("|"+dest,"");
>    }
>   else
>    {
>      td.style.backgroundColor = '#BFD7FF';
>      document.browseform["fm_list"].value = 
> document.browseform["fm_list"].value+"|"+dest;
>    }
>}
>
>
>The hidden field will contain the list of selected items like and gets 
>updated when a user clicks on a link if its in the list it gets removed, 
>if not it gets added. The problem is I am using the background color to 
>determine the status of the list, and there are situatiuons when the 
>background color and the list are out of sync. I would like to create a 
>way for the background color to be set from the list, but I have no idea 
>how to proceed. I have created a deselect() function, but it is very 
>crude. Here it is.
>
>function deselect()
>{
>var td = document.getElementById('.TEMP');
>td.style.backgroundColor = '#ffffff';
>var td = document.getElementById('app');
>td.style.backgroundColor = '#ffffff';
>var td = document.getElementById('apps');
>td.style.backgroundColor = '#ffffff';
>etc...
>}
>
>
>Thanks for any help with this.
>
>Terry Riegel