How do i make this function work in IE

[mehh]

OK this function wasn't designed with IE in mind but I'm out of ideas of how to make IE play ball. Any ideas anyone?

function blah(){
 var buffer=document.createElement('div');
 buffer.innerHTML=this.txt2.value;
 document.getElementsByTagName('body')[0].appendChild(buffer)
 var letters=buffer.childNodes;
 var newl=new Array();
 for(var i=0;i<letters.length;i++)
 {
 if(letters[i].innerHTML)
 {
 var temparr=letters[i].innerHTML.split("")
 for(var x=0;x<temparr.length;x++)
 {
 if(letters[i].tagName!="a"&&letters[i].tagName!="A")
  {
  newl[newl.length]=document.createElement(letters[i].tagName)
  newl[newl.length-1]=applyStyle(letters[i].style,newl[newl.length-1])
  newl[newl.length-1].appendChild(document.createTextNode(temparr[x]));
  }
 else
  {
  newl[newl.length]=letters[i]
  }
 }
 }
 else
 {
 newl[newl.length]=letters[i]
 }
 }
 buffer.innerHTML=""
 for(var i=0;i<newl.length;i++)
 {
 buffer.appendChild(newl[i]);
 }
 var rstring=buffer.innerHTML;
 document.getElementsByTagName('body')[0].removeChild(buffer)
 return rstring;
}
 

[Drag_Racer]

what is your intended purpose?

[penders]

Do you get errors in IE, or does it just not do what you want? On first glance, you appear to be missing several ';' (semicolons) at the end of your statements?!

eg:

document.getElementsByTagName('body')[0].appendChild(buffer);

I'm not convinced by the manipulation of innerHTML, although this may be OK? I would tend to perhaps createTextNode(this.txt2.value) instead... if this.txt2.value is intended to be text?! Hhhmm, maybe not?

What does applyStyle() do? May be the problem is in there?

[Dabrowski]

You know you can shorten this line considerably:

document.getElementsByTagName('body')[0].appendChild(buffer) 
document.body.appendChild(buffer);

[mehh]

Thanks for replying.

I guess I should have said its purpose's earlier. It basicly splits up an HTML tag and makes it into many smaller tags. so:

 <span style="font-size:10px">Hello</span>
 Becomes
 <span style="font-size:10px">H</span><span style="font-size:10px">e</span><span style="font-size:10px">l</span><span style="font-size:10px">l</span><span style="font-size:10px">o</span>

Penders, applyStyle defiantly works. I tested it separately and it works, the fault is in there somewhere. Also I need to use innerHTML for this purpose becuase in firefox (and maybe other browsers) it would convert characters like < and > to &gt; and &lt; and but I need tags to remain as tags so using createTextNode is out of the question.

Dabrowski, Thanks for the advise.

[Dabrowski]

ok, that should be fairly simple, but the code looks quite long winded for such a simple thing. A couple of questions to start....

buffer.innerHTML=this.txt2.value;

What does this.txt2.value actually contain?

newl[newl.length]=document.createElement(letters[i].tagName)
newl[newl.length-1]=applyStyle(letters[i].style,newl[newl.length-1])

You're creating an element, for example, newl[0] = a new div. You're then overwriting it with the value from applyStyle, you've got newl[0] = applyStyle..... so it now no longer is your new div. I suspect this may be where the problem is. If you can tell me the syntax and object of applyStyle I'm sure I can cut this code down somewhat.

[penders]

newl[newl.length]=document.createElement(letters[i].tagName) 
newl[newl.length-1]=applyStyle(letters[i].style,newl[newl.length-1])

You're creating an element, for example, newl[0] = a new div. You're then overwriting it with the value from applyStyle, you've got newl[0] = applyStyle..... so it now no longer is your new div. I suspect this may be where the problem is. If you can tell me the syntax and object of applyStyle I'm sure I can cut this code down somewhat.

@Dabrowski
Actually, it looks as if the value from applyStyle is assigned to the previous array element (Note: -1), to give something such as newl[-1] = applyStyle() ...?

[mehh]

Dabrowski is right it does overwrite the new div element or whatever it is with the returned value. This value is an element with the style object specified in the first parameter as its style object. So I replaced the line with this.

newl[newl.length]=applyStyle(letters[i].style,document.createElement(letters[i].tagName))

But it is still not working.
I know its not a general syntax error or something because its working fine in Mozilla, this issue is specific to IE.

@penders The length property of an array in javascript is always one greater than its biggest numerical key. so newl[newl.length]="blah" is the same as newl.push("blah") so newl[newl.length-1] is the last added value or the new plain div.

[penders]

@mehh, Dabrowski... Oops, of course - thanks for the education! :) Sorry about that!

In that case, isn't overwritting the current array element the desired effect - since it is 'modifying' the value, not writing over it with something completely different?

[Dabrowski]

Hmmm, I'm just gonna write this from scratch. Easier than finding a bug in code that I think could be more efficient.

Can you please just tell me what applyStyle does? What are the 2 parameters and what does it return?

[Drag_Racer]

many times IE will not have a value for innerHTML and sometimes return an error if innerHTM contains tags, if this be the case chech for innerText

so change

if(letters[i].innerHTML)

to

var txt = document.all? letters[i].innerText : letters[i].innerHTML;
if(txt && txt!= '')

this may be the problem, I'm not sure, but it will be more forgiving for old IE versions anyway.

also something else I noticed, if you are not sure about the content in this.txt2.value then letters array contain different nodeType's than your not expecting. So your first line after
for(var i=0;i<letters.length;i++)
should check for nodeType. Also, letters does not need to contain all the nodes..
such as...

for(var i=0;i<buffer.childNodes.length;i++){
if(buffer.childNodes[i].nodeType!=1){continue} //nodeType 3 would be text node
var temparr = document.all? buffer.childNodes[i].innerText.split("") : buffer.childNodes[i].innerHTML.split("");
if(temparr.length>0){
if(letters[i].tagName.toLowerCase()!="a"){

}else{}
}
}

does any of that mess help?

[Drag_Racer]

do it up Dabrowski, lets see how much we can squeeze this one down... ;)

[mehh]

applyStyle is one of the functions in my JS library the first parameter is the style object you want to add to the element the second is the element itself. Best of luck with your solution.

[Fotiman]

I think you may need to better clarify your requirements and purpose. For example, does this only apply to inline elements (span, a, etc.)? What would be the expected behavior is you tried to run this against a block level element (div, etc.)? Can the element contain other nested elements (<span style="color:red;">Hello <span style="color:blue;">World</span></span>), and if so what would be the expected result?

[Dabrowski]

Yes thankyou Fotiman, we need a clear explanation of what you want this function to do, even if we are to fix the original. What is the input parameter for example, do you want:

function splitString( obj) {

Where obj would be a reference to an element to take innerHTML from?

Do you only want bare text, i.e.

"foo bar" would split all characters into your SPANs....
"foo <b>bar</b>" would only split "foo " as "bar" is contained within another tag.

Don't mean to put you off, what you want is certainly possible, we just need details.

[mehh]

The input is the "this.txt2.value" as it is event driven. The text inputed would only be inline elements and no nestled tags. however there may be some br tags. letters in an A tag don't need to be split. special charictors eg &gt; need to be treated as one charictor. all charicors are that arn't contained within a tag need to be wraped in an empty span. any other questions?

[Dabrowski]

ok, I see. I assume the BR tags are to be left as they are. I'll have a go at this.

[edited by: Dabrowski at 4:13 pm (utc) on May 19, 2007]