Path: csiph.com!x330-a1.tempe.blueboxinc.net!usenet.pasdenom.info!news.albasani.net!newsfeed.straub-nv.de!npeer.de.kpn-eurorings.net!npeer-ng0.de.kpn-eurorings.net!newsfeed.arcor.de!newsspool1.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <3024323.SPkdTlGXAF@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Sun, 30 Oct 2011 18:58:50 +0100
User-Agent: KNode/4.4.11
Content-Transfer-Encoding: 8Bit
Subject: Re: Changing letters in boxes
Newsgroups: comp.lang.javascript
References: <1cb16076-87c8-4bc6-8007-1efddfb7530b@s10g2000yqa.googlegroups.com> <j8ji7m$fj8$1@dont-email.me>
Followup-To: comp.lang.javascript
MIME-Version: 1.0
Lines: 97
NNTP-Posting-Date: 30 Oct 2011 18:58:50 CET
NNTP-Posting-Host: 011572ad.newsspool3.arcor-online.net
X-Trace: DXC=65TY]MFk4L\V;Ef1`Jk54\McF=Q^Z^V3X4Fo<]lROoRQ8kF<OcfhCO[Q^kYTE\6d>QDZm8W4\YJN\;?f@h5gMfb\ofdGDOYLaoR01XCj4QO4L[
X-Complaints-To: usenet-abuse@arcor.de
Xref: x330-a1.tempe.blueboxinc.net comp.lang.javascript:7824

Jukka K. Korpela wrote:

> <script>
> function letters(a,b,c) {
>    document.getElementById('box').innerHTML =
>      '<td>' + a + '</td><td>' + b + '</td><td>' + c +  '</td>' ;
>   }
> </script>
> 
> Change the <tr> tag for the table to <tr id=box>. (Here and before "box"
> is just an identifier; choose another one if you can find a more
> self-documenting name.)

Unreliable.  Especially MSHTML (the layout engine that Internet Explorer 
uses) is prone to errors with `innerHTML' accesses in table structures.

A safer approach is to remove all cells of the row except one, then replace 
the content of the first cell and add more cells:

  var tr = document.getElementById("box");
  var firstChild = tr.firstChild;
  while (tr.lastChild != firstChild)
  {
    tr.removeNode(tr.lastChild);
  }

  tr.cells[0].innerHTML = a;

  var td1 = document.createElement("td");
  td1.innerHTML = b;

  /* or td1.cloneNode(false) */
  var td2 = document.createElement("td");
  td2.innerHTML = c;

  tr.appendChild(td1);
  tr.appendChild(td2);

(It suffices here to add text nodes to the cells, or replace their values if 
existing, instead of using the proprietary and error-prone `innerHTML' 
property.  This can be accomplished using the `textContent' property of DOM 
Level 3 Core or the document.createTextNode(…) and appendChild(…) methods of 
DOM Level 2+ Core.)

Another possibility is to rewrite the entire table with `innerHTML'.  
Quirksmode.org results have shown that this can be much more efficient than 
the standards-compliant DOM approach.  But probably not in this case.

> Add onclick attributes to the <input> element to make them as follows:
> 
> box #1: <input type="text" value='x y z' size='10'
> onclick="letters('x','y','z')" /><br />
> box #2: <input type="text" value='a b c' size='10'
> onclick="letters('a','b','c')" /><br />
> box #3: <input type="text" size='10' onclick="letters('','','')" />

Since the value of the control can be used to construct the argument list 
for the letters() method, and the `click' event bubbles universally, it 
might not be necessary that each `input' element has an `onclick' attribute 
specified.  For example:

  <script type="text/javascript">// <![CDATA[
    function clickHandler(e)
    {
      var t = e.target || e.srcElement;
      if (t)
      {
        if (t.nodeType == 3)
        {
          /* if a text node */
          t = t.parentNode;
        }

        if (t.tagName.toUpperCase() == "INPUT")
        {
          letters.apply(null, t.value.split(" "));
        }
      }
    }
  // ]]></script>

  <… onclick="if (typeof event != "undefined") clickHandler(event)" …>
    <input type="text" value='x y z' size='10' /><br />
    <input type="text" value='a b c' size='10' /><br />
    <input type="text" size='10' value='  ' />
  </…>

Usability, in particular keyboard navigation, might be better served by 
listening to the not universally bubbling `focus' event instead, though.  
For that matter, formatting should not be achieved using the `br' element, 
but a semantic element, for example `label' elements that are parent 
elements of their `input' elements.
 

PointedEars
-- 
When all you know is jQuery, every problem looks $olvable.