getElementById

Discussion in 'Javascript' started by Chameleon, Mar 11, 2006.

  1. Chameleon

    Chameleon Guest

    The following code works in Mozilla Firefox but not in IE.
    Where is the problem?
    ------------------------------
    <HTML>
    <script>
    function hi() {
    html = document.getElementById('html').checked;
    alert(html);
    }
    </script>
    <input type=checkbox id=html onchange="hi();" checked>HTML format
    </HTML>
    ------------------------------
    thanks
     
    Chameleon, Mar 11, 2006
    #1
    1. Advertising

  2. On 11/03/2006 17:41, Chameleon wrote:

    [snip]

    > Where is the problem?


    Other than the invalid markup?

    [snip]

    > function hi() {
    > html = document.getElementById('html').checked;
    > alert(html);
    > }
    > </script>
    > <input type=checkbox id=html onchange="hi();" checked>HTML format


    The issue here is with IE's tendency to create global variables using
    the id attribute values of elements, and the variable in the function, hi.

    When IE parses an element with an id attribute, it creates a global
    variable with the same name as that value and assigns to it a reference
    to the element. That is, after parsing the markup in your example, there
    will be a global 'html' variable that references the checkbox.

    These global variables are read-only and attempting to assign any value
    to them will result in an error, hence your problem. However, if a
    variable is declared using a var statement, this will override IE's
    normal behaviour.

    So, if your intention was for 'html' to be a global variable, explicitly
    declare it so:

    var html;

    function hi() {
    /* ... */
    }

    If not, and there's indication that it should be, make it a local variable:

    function hi() {
    var html = /* ... */
    }


    A few other notes:

    Before using DOM methods like getElementById, one should test for them.
    Testing the return value isn't a sound defensive strategy, too:

    function hi() {
    var html;

    if (document.getElementById) {
    html = document.getElementById('html');
    }
    if (html) {
    alert(html.checked);
    }
    }

    However, the use of getElementById isn't necessary in your case:

    function hi(html) {
    alert(html.checked);
    }

    <input type="checkbox" onchange="hi(this);" checked>

    In the snippet above, the this operator will refer to the checkbox, so
    this reference can be passed to the function directly.

    Hope that helps,
    Mike

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
     
    Michael Winter, Mar 11, 2006
    #2
    1. Advertising

  3. Chameleon

    Chameleon Guest

    >> function hi() {
    >> html = document.getElementById('html').checked;
    >> alert(html);
    >> }
    >> </script>
    >> <input type=checkbox id=html onchange="hi();" checked>HTML format

    >
    > The issue here is with IE's tendency to create global variables using
    > the id attribute values of elements, and the variable in the function, hi.
    >
    > When IE parses an element with an id attribute, it creates a global
    > variable with the same name as that value and assigns to it a reference
    > to the element. That is, after parsing the markup in your example, there
    > will be a global 'html' variable that references the checkbox.
    >
    > These global variables are read-only and attempting to assign any value
    > to them will result in an error, hence your problem. However, if a
    > variable is declared using a var statement, this will override IE's
    > normal behaviour.


    I use
    h = document.getElementById('html').checked;
    thanks
     
    Chameleon, Mar 11, 2006
    #3
  4. On 11/03/2006 19:32, Chameleon wrote:

    [snip]

    > I use
    > h = document.getElementById('html').checked;


    That wasn't the conclusion you should have drawn.

    Using 'html' as a variable name is fine in this situation, just declare
    it first. That isn't just something that should be done to overcome IE's
    dubious behaviour: all variables, local and global, should be declared.
    It's in the spirit of best practice.

    You should have also ceased using the getElementById method.

    I noticed that you did something equally daft in your other thread.

    Mike

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
     
    Michael Winter, Mar 11, 2006
    #4
  5. [Typos] Re: getElementById

    On 11/03/2006 18:27, Michael Winter wrote:

    > So, if your intention was for 'html' to be a global variable, explicitly
    > declare it so:


    [snip]

    > If not, and there's indication that it should be, make it a local variable:

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    "there's no indication that it should be"

    [snip]

    > Before using DOM methods like getElementById, one should test for them.
    > Testing the return value isn't a sound defensive strategy, too:

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    "is a sound defensive strategy"

    [snip]

    Mike

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
     
    Michael Winter, Mar 11, 2006
    #5
  6. Michael Winter wrote:

    > On 11/03/2006 17:41, Chameleon wrote:
    >> function hi() {
    >> html = document.getElementById('html').checked;
    >> alert(html);
    >> }
    >> </script>
    >> <input type=checkbox id=html onchange="hi();" checked>HTML format

    >
    > The issue here is with IE's tendency to create global variables using
    > the id attribute values of elements, and the variable in the function, hi.
    >
    > When IE parses an element with an id attribute, it creates a global
    > variable with the same name as that value and assigns to it a reference
    > to the element. That is, after parsing the markup in your example, there
    > will be a global 'html' variable that references the checkbox.
    >
    > These global variables are read-only and attempting to assign any value
    > to them will result in an error, hence your problem. [...]


    It is debatable whether those should be called global variables or not.
    Global variables are properties of the Global Object with the DontDelete
    attribute, but properties of the Global Object are not read-only by
    default, nor have they the ReadOnly attribute.

    Therefore, IMHO it is better to speak of read-only properties of either
    "a host object in the scope chain" (since it is not provable that this
    host object is the Global Object) or "the Global Object". As for the
    latter, since those properties would be host-defined properties of the
    Global Object, AIUI they are entirely possible (see ECMAScript 3 Final,
    10.1.5).


    PointedEars
     
    Thomas 'PointedEars' Lahn, Mar 12, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Gilles T.
    Replies:
    8
    Views:
    2,120
    Alessandro Zifiglio
    Jan 5, 2004
  2. jm
    Replies:
    1
    Views:
    849
  3. Paul
    Replies:
    8
    Views:
    3,318
  4. Franck
    Replies:
    3
    Views:
    2,454
    Eliyahu Goldin
    Aug 25, 2005
  5. Ferret Face
    Replies:
    3
    Views:
    30,657
    Ferret Face
    Oct 4, 2005
Loading...

Share This Page