3

This is probably something simple I'm overlooking but my google-fu isn't turning anything up that could explain the cause. Take the following snippet for example (Ignoring for now that embedded js is generally considered bad practice):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>
    </title>
</head>
<body> 
    <form action="">
      <div>
        <input type="text" id="pattern" value="foobar">
        <input type="button" value="Alert" OnClick="alert(pattern.value);">
      </div>  
    </form>
</body> 
</html>

The above will print the alert message 'foobar' in IE8 and Firefox 3 but Chrome will print 'undefined'. Changing pattern to something else like pattern_ will print 'foobar' for all three browsers as expected.

Is pattern a reserved word or a name used for one of the builtin js libraries? What's the reason for this not working under Chrome?

greatwolf
  • 20,287
  • 13
  • 71
  • 105

2 Answers2

4

Because internally the mentioned browsers attach DOM elements as Objects to the global namespace (window). So, an object with id="xyz" can also be addressed as window.xyz or even as xyz. I suppose Chrome doesn't do this.

Also check my SO-question about this, especially the selected answer.

[edit] after comment: it's Chrome (webkit) related indeed and it may have something to do with what I found here. See also quirksmode (search the page for 'pattern' it looks like in HTML5 pattern is an attribute of input, so I can imagine that interferes with an id having the same name)

Community
  • 1
  • 1
KooiInc
  • 119,216
  • 31
  • 141
  • 177
  • 2
    that would not account for the fact that changing the id works – Locksfree Jun 15 '11 at 07:37
  • ok, fair enough, I was just going after what Victor T. said. Thx – Locksfree Jun 15 '11 at 07:50
  • Yep, interesting, and I can't find anything about that. Still, it's not advisable to use global variables like the OP showed in his code, I think. – KooiInc Jun 15 '11 at 07:55
  • @Kooil's explanation seems to be the most plausible, though why would the browser be in quirks mode even though I specified the doctype to be html 4.01? Oddly, this passes w3 validation. I'll probably accept this answer if a better one doesn't come along. – greatwolf Jun 15 '11 at 08:20
  • @Victor T: I don't know either, but it may be a browser issue (there's enough issues to solve @ chrome: http://code.google.com/p/chromium/issues/list). – KooiInc Jun 15 '11 at 13:22
1

Don't use global variables for access to DOM elements by id. There is document.getElementById(...) for that purpose, and even better - a selector function in nearly any js library/framework (e.g. $('#yourid') in jQuery, $('yourid') in Prototype, etc.). They guarantee you cross-browser support, while globals may vary on each browser.

mkilmanas
  • 3,395
  • 17
  • 27
  • +1 for the advice. I would use `getElement(s)*` methods in actual pages of course. Though I'm still curious about this quirk I ran into while I was experimenting. – greatwolf Jun 15 '11 at 08:14