Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #7824

Re: Changing letters in boxes

Followups directed to: comp.lang.javascript

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Changing letters in boxes fulio pen <fuliopen@yahoo.com> - 2011-10-30 05:26 -0700
  Re: Changing letters in boxes "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2011-10-30 15:08 +0200
    Re: Changing letters in boxes fulio pen <fuliopen@yahoo.com> - 2011-10-30 07:14 -0700
    Re: Changing letters in boxes fulio pen <fuliopen@yahoo.com> - 2011-10-30 10:22 -0700
      Re: Changing letters in boxes "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2011-10-30 20:14 +0200
        Re: Changing letters in boxes fulio pen <fuliopen@yahoo.com> - 2011-10-30 12:27 -0700
    Re: Changing letters in boxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-30 18:58 +0100
      Re: Changing letters in boxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-30 19:07 +0100
      Re: Changing letters in boxes Andrew Poulos <ap_prog@hotmail.com> - 2011-10-31 06:15 +1100
        Re: Changing letters in boxes Lasse Reichstein Nielsen <lrn.unread@gmail.com> - 2011-11-01 17:17 +0100
          Re: Changing letters in boxes Andrew Poulos <ap_prog@hotmail.com> - 2011-11-02 07:10 +1100
            Re: Changing letters in boxes Andreas Bergmaier <andber93@web.de> - 2011-11-01 23:37 +0100
              Re: Changing letters in boxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-02 00:20 +0100
        Re: Changing letters in boxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-01 18:01 +0100
      Re: Changing letters in boxes Matt McDonald <matt@fortybelow.ca> - 2011-10-30 17:42 -0600
        Re: Changing letters in boxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-31 02:19 +0100
          Re: Changing letters in boxes Matt McDonald <matt@fortybelow.ca> - 2011-10-31 21:29 -0600
            Re: Changing letters in boxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-01 11:52 +0100
      Re: Changing letters in boxes RobG <rgqld@iinet.net.au> - 2011-10-30 19:33 -0700
        Re: Changing letters in boxes "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2011-10-31 08:37 +0200
        Re: Changing letters in boxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-31 11:50 +0100
  Re: Changing letters in boxes faqir <faqir@faqir.com> - 2011-11-03 23:20 +0200

csiph-web