Having a problem with a chat program

[fert]

I'm working on a chat program that uses Javascript and Ajax.  One of its features is tabbed chatting and the problem lies in the code to generate the tab bar.

function gen_buttons()
{
var arr;
var x;
var style;

if(ajax.readyState==4)
{
	document.getElementById("chattabs").innerHTML="";
	arr=ajax.responseText;
	arr=arr.split(";");

	for(x in arr)
	{
		chattabs[x]=arr[x];

		if(x==current_tab)
		{
			style='style="background: black; color: white;"';
		}
		else
		{
			style="";
		}
		document.getElementById("chattabs").innerHTML+='<input type="button" '+style+' onClick="javascript:getchattext("'+chattabs[x]+'");" value="'+chattabs[x]+'"><input type="button" value="X" onClick="javascript:exitchat("'+chattabs[x]+'");">|';
		alert(document.getElementById("chattabs").innerHTML);
	}
}
}

in the beginning arr holds a string that looks something like this

ChatRoom1;ChatRoom2

and then i split the string and

arr[0]="ChatRoom1"

arr[1]="ChatRoom2"

 

Then the code generates the tab bar. but instead of looking like this

<input type="button" style="background: black; color: white;" onClick="javascript:getchattext("ChatRoom1");" value="ChatRoom1">
<input type="button" value="X" onClick="javascript:exitchat("ChatRoom1");">|
<input type="button" onClick="javascript:getchattext("ChatRoom2");" value="ChatRoom2">
<input type="button" value="X" onClick="javascript:exitchat("ChatRoom2");">|

it looks like this (note the odd =", extra spaces and capitalization)

<input style="background: black none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: white;" onclick="javascript:getchattext(" chatroom1="" );="" value="ChatRoom1" type="button">
<input value="X" onclick="javascript:exitchat(" chatroom1="" );="" type="button">|
<input onclick="javascript:getchattext(" chatroom2="" );="" value="ChatRoom2" type="button">
<input value="X" onclick="javascript:exitchat(" chatroom2="" );="" type="button">|

getchatttext() switches to a new tab

exitchat() closes a tab

 

This must be the oddest Javascript bug i've ever encountered and I have no idea as to what is going wrong.

[corbin]

<input type="button" style="background: black; color: white;" onClick="javascript:getchattext("ChatRoom1");" value="ChatRoom1">

 

That's invalid, functionality breaking HTML.

 

Specifically the onClick="javascript:getchattext("ChatRoom1");" part.

 

 

 

It should be onClick="javascript:getchattext('ChatRoom1');"

 

 

And really it should be

 

onclick="getchattext('ChatRoom1');"

 

 

 

 

document.getElementById("chattabs").innerHTML+='<input type="button" '+style+' onClick="javascript:getchattext("'+chattabs[x]+'");" value="'+chattabs[x]+'"><input type="button" value="X" onClick="javascript:exitchat("'+chattabs[x]+'");">|';

 

That's a beast of a string....  Here goes...

 

document.getElementById("chattabs").innerHTML+='<input type="button" '+style+' onclick="getchattext(\''+chattabs[x]+'\');" value="'+chattabs[x]+'"><input type="button" value="X" onclick="exitchat(\''+chattabs[x]+'\');">|';

 

 

 

I also suspect that there's an unexpected value in chattabs[x].  Try alerting that value.

[fert]

Got it!

it works perfectly now.  Thank you for your help!

[corbin]

No problem ;p.