StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><em>(Most of the below was before the OP clarified they were setting an event handler; left the list of other issues in case others find them useful)</em></p> <p>IE6 makes a mess of several aspects of <code>setAttribute</code>. Without knowing the exact problem you were dealing with (<em>this was before the edit inidicating it was an event handler</em>), it's hard to be sure whether that's really the problem, but here are a couple of known issues:</p> <h3>You can't use <code>setAttribute</code> to set event handlers</h3> <p>It's best to set event handlers using the reflected property or with <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener" rel="nofollow noreferrer"><code>addEventListener</code></a> [standard] / <a href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx" rel="nofollow noreferrer"><code>attachEvent</code></a> [IE], not <code>setAttribute</code> (and you <em>can't</em> use <code>setAttribute</code> on IE).</p> <p>So, any of these will work:</p> <pre><code>// Using reflected property theElement.onclick = yourFunction; // Using DOM2 standard addEventListener; note it's "click", not "onclick" theElement.addEventListener("click", yourFunction, false); // IE's non-standard alternative to addEventListener theElement.attachEvent("onclick", yourFunction); </code></pre> <p>...not</p> <pre><code>// This doesn't work on IE (at least) theElement.setAttribute("onclick", "yourFunction();"); </code></pre> <p>The <code>addEventListener</code> / <code>attachEvent</code> way of doing this is cool for other reasons: You can have <em>multiple</em> event listeners on the same event of an element. You can't do that using the reflected property.</p> <p>So for your specific situation:</p> <pre><code>menuItems = document.getElementById("menu").childNodes; for (i = 0; i < menuItems.length; i++) { if (menuItems[i].className != "blue") { menuItems[i].onmouseover = function() { HoverMenu(this); } } } </code></pre> <h3>Certain attributes need their modified names</h3> <p><strong><code>class</code></strong></p> <p>The correct way to set the class attribute is to use the reflected property <code>className</code>:</p> <pre><code>// Correct, cross-browser way. Works on IE6+, all versions of // Chrome, etc. Completely reliable. theElement.className = "new set of classes"; </code></pre> <p>or on modern browsers (so, not IE6!) you can use <code>classList</code>.</p> <p>One of IE6's many <code>setAttribute</code> bugs is that this doesn't work:</p> <pre><code>// Should also work, but fails on IE6 (and probably some other old versions) theElement.setAttribute("class", "new set of classes"); </code></pre> <p>Instead, IE6 (and probably a couple of other versions) make you use <code>"className"</code> instead of <code>"class"</code>, even though that makes no sense whatsoever. The reflected <em>property</em> has the name <code>className</code> because it used to be that in JavaScript, you couldn't use reserved words (like <code>class</code> or <code>for</code> or <code>if</code>) as property literals (<code>obj.class</code> was invalid). That's not been true for a while now (ECMAScript 5 fixed it), but that's why the reflected property is <code>className</code>, not <code>class.</code></p> <p>But since <code>setAttribute</code> takes a <em>string</em>, it should accept the proper name of the attribute. The fact it doesn't is just an IE bug (and one they've fixed in modern versions of IE if they're not in [in]compatibility mode).</p> <p><strong><code>for</code></strong></p> <p>Similarly, to set the <code>for</code> attribute (for instance, on <code>label</code>s), one uses the <code>htmlFor</code> reflected property:</p> <pre><code>// Correct, cross-browser way. Works on IE6+, all versions of // Chrome, etc. Completely reliable. theLabel.htmlFor = "id-of-field"; </code></pre> <p>On any non-broken browser, you can also use <code>setAttribute</code>:</p> <pre><code>// Should also work, but fails on IE6 (and probably some other old versions) theLabel.setAttribute("for", "id-of-field"); </code></pre> <p>...but not on IE6, it wants <code>"htmlFor"</code> instead of <code>"for"</code> for the same reason it wants <code>"className"</code> rather than <code>"class"</code> (e.g, because it's broken).</p> <p><a href="http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html" rel="nofollow noreferrer">This page</a> has quite a list of attributes that are problematic with IE.</p> <h3><code>setAttribute</code> can't be used to set the <code>style</code> attribute</h3> <p>...you have to use the <code>style</code> property instead; but to be fair, that's usually a more convenient way. Example: This won't work on IE:</p> <pre><code>theElement.setAttribute("style", "color: blue"); // Doesn't work on IE </code></pre> <p>...but this will:</p> <pre><code>myElement.style.color = "blue"; </code></pre> <h3>Slightly OT: Look at libraries</h3> <p>JavaScript libraries like <a href="http://prototypejs.org" rel="nofollow noreferrer">Prototype</a>, <a href="http://jquery.com" rel="nofollow noreferrer">jQuery</a>, <a href="http://code.google.com/closure/library" rel="nofollow noreferrer">Closure</a>, or <a href="http://en.wikipedia.org/wiki/List_of_JavaScript_libraries" rel="nofollow noreferrer">any of several others</a> will make most of the above a lot easier and smooth out differences amongst browsers if you go through their APIs.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload