[Javascript] select

[David T. Lovering]

As I noted, innerHTML will work with IE/Netscape, but...

It's sort of like using a hammer to drive screws, and arguing that
it's okay because it works.

innerHTML/outerHTML were originally designed to encompass the dynamic
changing of objects (!!!) throughout a page.  Syntacticly, an object
must have (1) a nodeName, (2) a tagName, (3) an id, (4) a name, and
(5) a type descriptor, [or some reasonable subset of the above] AND be
defined in the DOM heirarchy, or as a created object.  "Cat" doesn't
cut it.  Yes, embedding a string "Cat" inside a <TD></TD> tag pairing
which ARE DOM objects is technically correct, but it is kind of funky.

Also, if the animal name gets trashed for some reason and gets a ">" 
or "<", or some other bit of garbage appended to it, the whole page is corrupted.  
Putting your text inside a text input, object, or other construct erects
a syntax firewall that keeps whatever follows safe from this sort of
thing.

I know I'm being a hardass about something which will in fact
pass muster 99.99% of the time, but when you start mixing up DHTML with
XML and UML, some of these loosey-goosey JavaScript tricks will bite you
in the backside.

Just so we both know, I have used your trick myself, thusly:

<form name='myForm'>
  <table>
    <td><div id='creature' width=200 style='cursor: default'>this is an animal</div></td>
  </table>
</form>

... and the method for writing text into the td:

  document.myForm.getElementById("creature").innerHTML = 'Cat';

The addition of a <div> wrapper makes the whole thing much safer and more
hygenic.  You can also change stuff above it in the DOM hierarchy, and
the <div> wrapper keeps the inheritance from penetrating to your beasty.

Imagine the horror if you didn't have the DIV, and changed the innerHTML
to be a delete character or some such.  Not only would the whole page be
corrupted, but the object descriptor for 'creature' would no longer be
recognized, thereby making it impossible to fix the problem on the fly!

-- Dave Lovering

Andrew Gibson wrote:
> 
> Just trying to give some ideas, not to give the solution......!
> 
> Amongst other things, I'm confused as to the suggestion of not using
> .innerHTML. My understanding is that .innerHTML was designed mainly to aid
> in the dynamic changing of text in elements throughout a page....and it's
> compatible with the 2 big browsers....or does every solution on this have to
> be compatible with every browser?
> 
> =======================================
> 
> Subject: Re: [Javascript] select
> Hmmm... a couple of issues here...
> 
> Firstly, the "Select" entry in your options will also appear as a 'pet'.  I
> don't know what a 'Select' eats, or how to care for one myself.  You might
> want to take it out and put it as a label next to the select, or else embed
> a 'disable' flag in the options directive next to it.
> 
> Next, an innerHTML include of 'curPet' doesn't mean much to me, and I
> suspect
> most of the browsers in the world would be similarly confused.  Rather than
> use the innerHTML directive, simply label each of your 'pet' objects with an
> "id=xxxxx" declaration, where xxxxx is replaced by the name of the pet.
> Then
> when you do your getElementById("cat"), it returns a pointer directly to the
> cat object.
> 
> Next, you use a '.value' declaration in your options reference, yet since
> the
> value and the text attributes are the same in all cases, you might as well
> just use the default (.text), and stick with it.  This will simply both the
> code
> and the assignment issues later.
> 
> I'm again not sure what changing the inner HTML def for a TD actually does,
> although I'm guessing that it tries to stick the string '*' + curPet between
> the respective tags.  I'd think you'd be better off using
> 
> <input type='text' name='cat' size=1 readonly style='border=0;
> borderstyle=none'>
> 
> and just write the value (* or ' ') into it, rather than trying to stuff a
> <TD></TD>
> and hope that your browser won't do funky things with it.  My argument is
> not
> that <TD></TD> can't handle text (it is generally intended to do so and will
> work fine), but that it is typically static and drawn only at the onLoad
> event.
> Inputs are event-driven, and can be changed on the fly with less bother and
> greater portability between Netscape/IE/Opera/Galeon, etc.  If you REALLY
> want to
> nuke/rebuild a TD, use the deleteElement and createElement commands to do it
> according to Hoyle.  Trust me, changing a text field inside a <input> text
> object
> is trivial by comparison.
> 
> Finally I don't see the code which nukes the previous asterisk out of the
> last selection
> (however you choose to signify it).
> 
> -- Dave Lovering
> 
> Andrew Gibson wrote:
> >
> > The effect I want to achieve is, when selecting cat, an asterisk is placed
> > in the cell next to cat in the table.  When dog is selected, the asterisk
> is
> > removed from cat row and an asterick is placed in the dog row.  Kelly
> > ===========================================================
> >
> > Would this work?
> > <form>
> > <select onChange=test(this.form) size="1" name="pet" >
> >    <option value="Select">Select</option>
> >   <option value="Dog">Dog</option>
> >   <option value="Cat">Cat</option>
> >   </select>
> > </form>
> > <table>
> > <tr><td id=Dog>Dog</td></tr>
> > <tr><td id=Cat>Cat</td></tr>
> > </table>
> >
> > <script>
> > var curPet="";
> > function test(frm)
> > {
> > if(curPet!=""){
> > document.getElementById(curPet).innerHTML=curPet;
> > }
> >
> >  var pet=frm.pet.options[frm.pet.selectedIndex].value
> >  document.getElementById(pet).innerHTML="*"+pet
> >  curPet=pet
> > }
> > </script>
> >
> > Cheers
> > Andrew Gibson
> >
> > _______________________________________________
> > Javascript mailing list
> > Javascript at LaTech.edu
> > https://lists.LaTech.edu/mailman/listinfo/javascript
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript