Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > getElementById

Reply
Thread Tools

getElementById

 
 
Chameleon
Guest
Posts: n/a
 
      03-11-2006
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
 
Reply With Quote
 
 
 
 
Michael Winter
Guest
Posts: n/a
 
      03-11-2006
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.
 
Reply With Quote
 
 
 
 
Chameleon
Guest
Posts: n/a
 
      03-11-2006
>> 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
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      03-11-2006
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.
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      03-11-2006
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.
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      03-12-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP.NET equivallent to document.getElementById Ferret Face ASP .Net 3 10-04-2005 05:46 PM
document.getElementById find nothing Franck ASP .Net 3 08-25-2005 11:07 AM
Help with Response.Write and getElementById Paul ASP .Net 8 01-28-2004 09:49 PM
How do you get the getElementById in a DataGrid? jm ASP .Net 1 01-15-2004 04:11 AM
getElementById with edit mode of datagrid control Gilles T. ASP .Net 8 01-05-2004 02:59 PM



Advertisments