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

Groups > comp.lang.javascript > #7611

Re: Clear field with Javascript - use of variable?

Followups directed to: comp.lang.javascript

Show all headers | View raw

Garry Jones wrote:

> <script language="JavaScript" type="text/javascript">

Forget about the deprecated `language' attribute for now.

> function cfld() {
>     document.getElementById("newsinl").value="";
>     document.getElementById("newsinl").focus();

Never retrieve the same value more than one time:

  var o = document.getElementById("newsinl");
  o.value = "";
  o.focus();

For a more fail-safe solution, check whether you have an object reference:

  var o = document.getElementById("newsinl");
  if (o)
  {
    o.value = "";
    o.focus();
  }

(Note that this approach can hide errors in the markup – such as 
accidentally misnamed elements – and make debugging harder.  So use it 
wisely.)

For an even safer solution, test that the methods you are about to call do 
exist:

  var t = typeof document.getElementById;
  if (/unknown/i.test(t)
      || /\b(object|function)\b/i.test(t) && document.getElementById)
  {
    var o = document.getElementById("newsinl");
    if (o)
    {
      o.value = "";
      t = typeof o.focus;
      if (/unknown/i.test(t)
          || /\b(object|function)\b/i.test(t) && o.focus)
      {
        o.focus();
      }
    }
  }

(Wrappers in the form of `isMethod' and `isHostMethod' have been devised.  
STFW if it cannot be found in the FAQ.)

To be really safe, also catch any exceptions this might throw (for example, 
if the control in question is not rendered, it cannot be focused):

  var t = typeof document.getElementById;
  if (/unknown/i.test(t)
      || /\b(object|function)\b/i.test(t) && document.getElementById)
  {
    var o = document.getElementById("newsinl");
    if (o)
    {
      o.value = "";
      var t = typeof o.focus;
      if (/unknown/i.test(t)
          || /\b(object|function)\b/i.test(t) && o.focus)
      {
        try
        {
          o.focus();
        }
        catch (e)
        {
          /* perhaps do something alternative here */
        }
      }
    }
  }

(This is only an illustrative example.  Depending on your target 
environments, you may not need to test whether document.getElementById is a 
method.)

Note that try..catch was a late addition to ECMAScript, so it might be 
considered a syntax error by an implementation.  You can work around that, 
so that the code compiles:

  var t = typeof document.getElementById;
  if (/unknown/i.test(t)
      || /\b(object|function)\b/i.test(t) && document.getElementById)
  {
    var o = document.getElementById("newsinl");
    if (o)
    {
      o.value = "";
      var t = typeof o.focus;
      if (/unknown/i.test(t)
          || /\b(object|function)\b/i.test(t) && o.focus)
      {
        eval("try { o.focus(); } catch (e) {}");
      }
    }
  }

But keep in mind that eval() decreases the runtime efficiency of your code 
considerably, and that it does not work in the strict mode of ECMAScript 
Edition 5 (the eval code's scope chain will be empty, so `o' undefined).

> }
> </script>
> <input maxLength="100" name="newsinl" id="newsinl" type="text" value=""
> size="100">

You should make it obvious which kind of control you are using.  Move the 
`type' attribute specification to the front, or omit it ("text" is the 
default value).  It is good practice to put identifying attribute 
specifications first and formatting ones second.

> <a href="javascript:cfld();" >Clear field</a>

Avoid doing this.  Use a dynamically generated button instead.  At least use 
an `onclick' attribute on this element.  See the FAQ.
 
> […]
> Instead of writing a seperate function for each input field I would like
> to use the same one and pass a variable from each link. Can someone point
> me in the right direction as I am having problems finding a good site with
> simple instructions for this.

See <https://developer.mozilla.org/en/JavaScript/Guide/Functions>.  You can 
find a lot more information in adjacent chapters.

MDN is linked from the FAQ, <http://jibbering.com/faq/>, which you should 
have read before you posted.


PointedEars
-- 
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16

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

Thread

Clear field with Javascript - use of variable? "Garry Jones" <garry@garryjones.se> - 2011-10-21 00:27 +0200
  Re: Clear field with Javascript - use of variable? Tim Streater <timstreater@greenbee.net> - 2011-10-20 23:53 +0100
    Re: Clear field with Javascript - use of variable? Erwin Moller <Since_humans_read_this_I_am_spammed_too_much@spamyourself.com> - 2011-10-21 11:24 +0200
  Re: Clear field with Javascript - use of variable? Dr J R Stockton <reply1142@merlyn.demon.co.uk> - 2011-10-21 21:53 +0100
  Re: Clear field with Javascript - use of variable? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-10-22 01:17 +0200

csiph-web