5x12 pentomino tiling

Wrestling with JavaScript


I've spent some time today struggling to get some JavaScript code working across multiple browsers. When it comes to JavaScript I really am a hacker in the old sense of the word: self taught and knowing just enough to get by.

Anyway two things caught me out today and I thought I'd document both here both as a reminder to me and in case someone else finds it useful.

  1. If you want to modify the contents of a <textarea> you need to modify the value property. If you try using the more generic innerHTML property instead then some browsers (e.g. Internet Explorer) seem quite happy to let you do that whereas others (e.g. Firefox) aren't.

  2. Internet Explorer works through its DOM when letting you play with the value of innerHTML. Why does that matter? Well to take one example, if there a <fieldset> tag in the innerHTML of a <div> which enfold the <fieldset> then IE will treat the <fieldset> as upper case even if it's lower case in the source. So doing a case sensitive test on the innerHTML of the <div> using the search string "<fieldset>" doesn't produce any matches. But it does on Firefox for example because Firefox seems to respect the source.

    Similarly IE removes some (but not all!) of the quotes around attributes so when searching for what in the source reads <fieldset class="fields2"> you have to use a RegExp of <fieldset class\="?fields2"?>/i to keep all flavours of browsers happy.

The second of these I've got caught out of before so I should have known better, the first I put down to tiredness and repetition (the line above in the code has to use an innerHTML to do the same thing on another chunk of HTML).

Tags: JavaScript, web design Written 10/03/10

Previous comments about this article:

On 10/03/10 at 7:50pm Jez wrote:

According to my shiny new book, innerHTML is a proprietary Micro$oft invention which Firefox seems to have adopted. Ironically it's better supported than some of the W3C recommended properties. There are apparently several tags that according to MS have read-only properties with respect to innerHTML, including and . Check out ajaxian.com/archives/innerhtml-gotchas

Comment on this article

« »
I am currently reading:

A History of Women in 101 Objects by Annabelle Hirsch Game On by Janet Evanovich

Word of the Day: