IE7 and innerHTML Issues

Seguer

So I have a javascript function that iterates through some elements, replacing the innerHTML as it goes. This works fine for textareas, but not for textboxes. The page in question is here: http://www.graziosi-baltship.com.au/forms/LoA.php

The Javascript:

function prepareTextboxes()
{
var e=getElementsByClassName(document, "span", "inlinetextbox");

if (e.length > 0)
{
for (var i=0; i<e.length; i++)
{
//alert(e.childNodes[0]);
var t=e.childNodes[0]; //textbox
var v = t.value;
v = v.replace(/\n/g, "");
alert(e.innerHTML);
alert("<p class='textbox'>" + v + "</p>");
e.innerHTML = "<p class='textbox'>" + v + "</p>";
}
}
}

function prepareTextareas()
{
/* Textareas are in a span */
/* <span name="textarea"><textarea rows="4" cols="4"></span> */

// e contains an array of span elements, that have a textarea in them
var e=getElementsByClassName(document, "span", "textarea");

if (e.length > 0)
{
for (var i=0; i<e.length; i++)
{
//alert(e.childNodes[0]);
var t=e.childNodes[0]; //textarea
var v = t.value;
v = v.replace(/\n/g, "<br />");
if (v.length == 0)
{
v = "<br />";
}
e.innerHTML = "<p class='textarea'>" + v + "</p>";
}
}
}

getElementsByClassName is another function in the js file, but it works fine. In the page linked, the Textboxes function throws an error in IE7 but works fine in FF2. That page actually has no textareas, but on another page that function works fine (and has been for a while, the textbox function is new).

It gets the element and its value fine, but dies when it tries to set the innerHTML of the outside span, and I don't know why. Anyone else had similar issues?

VThornheart

For Text Boxes (<INPUT> tags), you need to change the "Value" attribute I believe.

Remember that InnerHTML is (supposed to) change the contents of everything between the starting tag and ending tag of an entity. INPUT doesn't work that way (i.e. it doesn't use characters between its start and end... not that I've seen at least), so InnerHTML is meaningless to it.

You'd find the same problem if you tried to change, for example, the path to an <IMG> tag by changing its InnerHTML. It doesn't have InnerHTML, so it won't do anything. (But in that case, you can change the "src" attribute). Just got to find the right attribute for the job. Most times InnerHTML will do it, but for things like INPUT boxes it won't.

Hopefully this helps.

Seguer

That did help, but it lead me to the underlying issue: for some reason IE7 doesn't like changing innerHTML on the span (not the textbox) when it's in the table and the paragraph. I copied it outside and it worked fine. This may be an engine issue and not anything I can fix..


EDIT: Fixed. Resorted to DOM stuff instead of innerHTML.

VThornheart

Aye, it'll be better. InnerHTML works these days for a lot of things (hell, I use it too ), but I think it wasn't originally designed to be used in the way it often is.