Ghost in the Machine or "Is my HTML somehow creating javascript objects???"

[Lance]

I have quite an odd question. Usually I ask whenever javascript is not
acting the way I'd expect. This time I'm trying to figure out why
something works when I don't think it should be working!

I'm working on a web page that has a <div> area for dynamic content
display (id='content').

In between the </body> and </html> tags is where I'm storing the text
to be displayed when needed. They are stored inside wrapper <div>s
which are set to "display:none" (<div id='wrap1' class='cloak'> etc.)

I change the content displayed thusly:
onclick="content.innerHTML=wrap1.innerHTML"

I don't understand why this works, because *nowhere* in my document
have I declared:
var content=document.getElementById('content')

I *should* be using:

onclick="getElementById('content').innerHTML=getElementById('wrap1').innerHTML"

Shouldn't I? In fact, that is the way I originally started doing it.
Then I started using variables so that I could remove some of the
"getElementById"s and by fluke I discovered it wasn't necessary to set
the variables. I've even rebooted in case there was some memory leak
keeping those variables set even after I've removed their declaration
from my script, but it still continues to work. Why is it working? Is
this a hidden feature of IE? Or have I missed something obvious?

Lance

 

[Mick White]

Lance wrote:
[snip]

I change the content displayed thusly:
onclick="content.innerHTML=wrap1.innerHTML"

I don't understand why this works, because *nowhere* in my document
have I declared:
var content=document.getElementById('content')

I *should* be using:

onclick="getElementById('content').innerHTML=getElementById('wrap1').innerHTML"
[...]

Why is it working? Is
this a hidden feature of IE?

Well, not hidden, and IMO, not a feature.

Mck

 

[Michael Winter]

On 09/07/2005 22:43, Lance wrote:

[snip]

I'm working on a web page that has a <div> area for dynamic content
display (id='content').

In between the </body> and </html> tags is where I'm storing the text
to be displayed when needed.

Why? Only the HEAD and BODY elements are valid children of the HTML element.

They are stored inside wrapper <div>s which are set to "display:none"
(<div id='wrap1' class='cloak'> etc.)

Why don't you place them where the 'content' DIV is and toggle the
display property? It should be more efficient than having the browser
parse HTML and build a document fragment, it's valid, and will degrade
better if CSS or client-side scripting is unavailable or disabled.

I change the content displayed thusly:
onclick="content.innerHTML=wrap1.innerHTML"

I don't understand why this works [...]

In some browsers (most notably IE), elements that possess name or id
attributes are made properties of other objects. In this case, an
element with an id attribute is available as a property of the global
object.

[snip]

I *should* be using:

onclick="getElementById('content').innerHTML=getElementById('wrap1').innerHTML"

No, you should probably be doing what I suggested above, but if you
don't like that idea, then the fragment above is still unwise, too. The
getElementById method is a property of the document object, and there is
no reason to assume that the document object will automatically be part
of the scope chain used to resolve identifiers. The code above is still
likely to fail on many browsers. Prefix the function call with 'document.'.

[snip]

Why is it working? Is this a hidden feature of IE? [...]

It's not a hidden feature, but it's a bad one in my opinion. Don't use it.

Mike

 

[VK]

I change the content displayed thusly:

onclick="content.innerHTML=wra­p1.innerHTML"
I don't understand why this works, because *nowhere* in my document
have I declared:
var content=document.getElementByI­d('content')

It's so called "default member", something Microsoft likes to use a lot
in their languages.

content.innerHTML=wra­p1.innerHTML;

effectively equals to:

with (window) {
content.innerHTML=wra­p1.innerHTML;
}

It's not as bad as:

<form name="myForm">
....
<input type="submit" name="submit" value="Submit">
</form>

Now try to submit the form using document.forms[0].submit() and be
amased.

(All this crap is IE-only I guess)