Prev: window.open and focus
Next: java based chat
From: Chameleon on 11 Mar 2006 12:41
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
From: Michael Winter on 11 Mar 2006 13:27
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.
From: Chameleon on 11 Mar 2006 14:32
>> 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
From: Michael Winter on 11 Mar 2006 14:55
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.
From: Michael Winter on 11 Mar 2006 18:08
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.
 |  Next  |  Last
Pages: 1 2
Prev: window.open and focus
Next: java based chat