Path: csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!news.mixmin.net!feeder1-2.proxad.net!proxad.net!feeder2-2.proxad.net!newsfeed.arcor.de!newsspool4.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <2441513.NidSsCbtjZ@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <usenet@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Wed, 16 Jan 2013 12:49:59 +0100
User-Agent: KNode/4.4.11
Content-Transfer-Encoding: 8Bit
Subject: Re: Matching arbitrary pairs of elements
Newsgroups: comp.lang.javascript
References: <1kwe933.qjka3b5vluq5N%real-not-anti-spam-address@apple-juice.co.uk> <kcioj3$cip$1@dont-email.me>
Followup-To: comp.lang.javascript
MIME-Version: 1.0
Lines: 131
NNTP-Posting-Date: 16 Jan 2013 12:50:01 CET
NNTP-Posting-Host: 5ece0cd5.newsspool4.arcor-online.net
X-Trace: DXC=kK@T;0MSdeK0YVY]kmLTlD4IUK<Cl32<A4Fo<]lROoRA8kF<OcfhCOK\hWdEekMToMDZm8W4\YJNLb@mF9jNikdE3>YBYU3JEoMVo4bIkiPDTA
X-Complaints-To: usenet-abuse@arcor.de
Xref: csiph.com comp.lang.javascript:18107

Leonardo Azpurua wrote:

> "D.M. Procida" <real-not-anti-spam-address@apple-juice.co.uk> escribi� en
> el mensaje
> news:1kwe933.qjka3b5vluq5N%real-not-anti-spam-address@apple-juice.co.uk...

It is supposed to be an attribution _line_, not a novel.

The non-ASCII characters that you intended to post are undeclared as being 
such characters, which is why they are displayed garbled (unless guessed by 
a newsreader correctly, outside of the protocol specification).

Please read and apply <http://insideoe.com/>, or get a better posting agent, 
like <http://getthunderbird.com/>.

>> I am trying to create a widget that when a certain option in a <select>
>> is chosen, a previously-hidden input field is shown.
>> […]
> 
> […]
> If I had to solve your problem, I would probably write a class (function)
> to handle it.
> 
> Not sure that it would work, since I am also a newcomer to Web
> development, but it's likely that this is the way:
> 
> function widgetPair(selWidget, textWidget)

Constructor identifiers should start with a capital letter, to distinguish 
them from those of other functions.

> {
>     this.sel = selWidget;
>     this.txt = textWidget;
>     this.sel.style.display = "block";
>     this.txt.style.display = "none";

In real code, the target *element* initialization should be moved to a 
separate method, so that this method can be called on a need-to-use basis 
that allows for inheritance:

<http://PointedEars.de/websvn/filedetails.php?repname=JSX&path=%2Ftrunk%2Fdom%2Fwidgets.js>

It is better to use "" instead of "block", so that the property value can 
revert to its initial value, independent of element type.  This requires, of 
course, that the “display” property is not set by default, which is 
recommended for compatibility/usability.

>     this.sel.addEventListener("change", this.showHideText, false);

You should consider that the control to be wrapped may have a listener added 
already, either implictly through an event-handler attribute or explicitly 
through (the equivalent) of addEventListener().

> }
> 
> widgetPair.prototype.showHideText = function () {
>         if (this.sel.value = "SHOW")

It appears to be prudent to avoid all-uppercase element type names, 
attribute names, and values.  All-uppercase character strings should be 
reserved for identifiers of constants and constant-like entities.

The “value” property of “select” element objects is not implemented in a 
compatible way: It may be the value of the “value” attribute of the selected 
“option” element, or it may be its text content.

For a compatible approach, use

  this.sel[this.selectedIndex].value

and consider that “this.selectedIndex” may result in -1 if nothing has been 
selected, in which case the second-to-last property access would result in a 
runtime error or “undefined”.

>         {
>             this.txt.style.display = "block";

See above.

> […]
> Then, if you have several pairs like this, you can write:
> 
> p1 = new widgetPair(forms[0].getElementByName("select1"),

var p1 = …

>                                  forms[0].getElementByName("text12"));

References should be qualified:

  document.forms[0].…

<https://developer.mozilla.org/en-US/docs/DOM/document.forms> p.

> p2 = new widgetPair(forms[0].getElementByName("select5"),

The method identifier is getElement*s*ByName(); the method returns a 
NodeList or HTMLCollection, and is not available on non-HTMLDocument 
objects.

<https://developer.mozilla.org/en-US/docs/DOM/form> p.

If HTML form controls are accessed by name via their forms, the form 
object's “elements” collection should be used:

  document.forms[0].elements["select5"]

This avoids a non-native method call and limits the target objects to form 
controls, which is potentially faster (shorter hash table).

Note that the result is a NodeList if there are more controls with the same 
name in that form.  This backwards-compatible cross-implementation behavior 
has been formally specified in the W3C Candidate Recommendation for HTML5.

<https://developer.mozilla.org/en-US/docs/DOM/form.elements> p.

>                                forms[1].getElementByName("textNoNumber"));
> 
> and that would be all... perhaps.

The OP asked about a way to use *one* “select” element to define the display 
of several other controls, though.  This can be facilitated with proper 
values and naming (as I showed in my example), and makes a wrapper object 
and on-load initialization unnecessary, however not per se superfluous.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.