Javascript function is not working in innerhtml.

[poojak]

I have write two different js function in a external file. one function write a table (I used innerHTML for this.) and another function is for showing/ hideing some rows depending on radio button selection. Both of these function works properly when used in HTML file, but when I use same showhide function in a table which is created by Javascript that function doesn't work at all. I am copying both JS functions here also, If someone can solve this problem.

Function to Add multiple tabel on a click a Link:

function addtable(){
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table cellpadding=0 cellspacing=0><tr><td colspan=2 class=tbpadding align=left valign=middle><h6>Alternate Addresses</h6></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Address Type: </strong></td><td valign=middle><table width=220 cellpadding=0 cellspacing=0 id=nopadding><tr><td><strong> Home:</strong> </td><td width=23><input name=address_type id=home type=radio class=checkbox value=1 checked /></td><td><strong>&nbsp;&nbsp;&nbsp;Business:</strong> </td><td width=20><input name=address_type id=business type=radio class=checkbox /></td><td><strong>&nbsp;&nbsp;&nbsp;Other:</strong> </td><td width=20><input name=address_type id=other type=radio class=checkbox /></td></tr></table><tr id=h style=display:inline><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Address Line1: </strong></td><td valign=middle><input name=repeate_password2 type=text class=textinput id=repeate_password2 value=10238 /></td></tr><tr id=hh style=display:inline><td valign=middle><strong>&nbsp;&nbsp; Address Line2: </strong></td><td valign=middle><input name=repeate_password3 type=text class=textinput id=repeate_password3 /></td></tr><tr id=b style=display:none><td valign=middle><strong>&nbsp;&nbsp;&nbsp;Business Title: </strong></td><td valign=middle><input name=repeate_password2 type=text class=textinput id=repeate_password2 value=10238/></td></tr><tr id=bb style=display:none><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Company Name: </strong></td><td valign=middle><input name=repeate_password3 type=text class=textinput id=repeate_password3 /></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;City:</strong></td><td valign=middle><input name=repeate_password4 type=text class=textinput id=repeate_password4 value=Phoenix /></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;State/Province/Territory: </strong></td><td valign=middle><select name=select3 class=selectsmall><option>AZ</option></select></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Zip/Postal Code: </strong></td><td valign=middle><input name=repeate_password5 type=text class=textinput id=repeate_password5 value=85258/></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Country: </strong></td><td valign=middle><label><select name=select2 class=selectsmall><option selected>USA</option></select></label></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Phone Number: </strong></td><td valign=middle><input name=repeate_password6 type=text class=textinput id=repeate_password6/></td></tr><tr><td valign=middle><strong>&nbsp;&nbsp; Alternate Phone Number: </strong></td><td valign=middle><input name=repeate_password7 type=text class=textinput id=repeate_password7/></td></tr><tr><td valign=middle><strong>&nbsp;&nbsp; Fax Number:</strong></td><td valign=middle><input name=repeate_password8 type=text class=textinput id=repeate_password8/></td></tr><tr><td colspan=2><stromg><a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove<span> &gt;</span></a></strong></td></tr></table>";
ni.appendChild(newdiv);
}

Function for Showing or hiding table rows on selection of a radio button is:

function changeaddress(h,hh,b,bb) { 
        if ((document.getElementById("business").checked)){
            document.getElementById(h).style.display = 'inline';
            document.getElementById(hh).style.display = 'inline';
            document.getElementById(b).style.display = 'inline';
            document.getElementById(bb).style.display = 'inline';
        }
        else {
            document.getElementById(b).style.display = 'none';
            document.getElementById(bb).style.display = 'none';
            document.getElementById(h).style.display = 'inline';
            document.getElementById(hh).style.display = 'inline';
 
        }
 
}
 

When I call "changeaddress" function in "addtable" function it doesn't work.

Thanks in advance.
Pooja

[mohsenhosseini]

hi dear
please send your cpmplet page,which all of your functions in a page.
to i check and try to fix and work when you we put them in a external js file.

regards.
mh

[acoder]

In IE, you need the tbody tag after <table> for the table to display.

[poojak]

I am sending you the code in 2 parts.
Part 1:
[code]<html>
<head>
<script language="javascript">
function addtable(){
document.getElementById('hidethis').style.display = 'none';
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table cellpadding=0 cellspacing=0><tr><td colspan=2 class=tbpadding align=left valign=middle><h6>Alternate Addresses</h6></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Address Type: </strong></td><td valign=middle><table width=220 cellpadding=0 cellspacing=0 id=nopadding><tr><td><strong> Home:</strong> </td><td width=23><input name=address_type id=home type=radio class=checkbox value=1 checked onClick='changeaddress()' /></td><td><strong>&nbsp;&nbsp;&nbsp;Business:</strong> </td><td width=20><input name=address_type id=business type=radio class=checkbox onClick='changeaddress()' /></td><td><strong>&nbsp;&nbsp;&nbsp;Other:</strong> </td><td width=20><input name=address_type id=other type=radio class=checkbox onClick='changeaddress()' /></td></tr></table><tr id='h' style=display:inline><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Address Line1: </strong></td><td valign=middle><input name=repeate_password2 type=text class=textinput id=repeate_password2 value=10238 /></td></tr><tr id='hh' style=display:inline><td valign=middle><strong>&nbsp;&nbsp; Address Line2: </strong></td><td valign=middle><input name=repeate_password3 type=text class=textinput id=repeate_password3 /></td></tr><tr id='b' style=display:none><td valign=middle><strong>&nbsp;&nbsp;&nbsp;Business Title: </strong></td><td valign=middle><input name=repeate_password2 type=text class=textinput id=repeate_password2 value=10238/></td></tr><tr id='bb' style=display:none><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Company Name: </strong></td><td valign=middle><input name=repeate_password3 type=text class=textinput id=repeate_password3 /></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;City:</strong></td><td valign=middle><input name=repeate_password4 type=text class=textinput id=repeate_password4 value=Phoenix /></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;State/Province/Territory: </strong></td><td valign=middle><select name=select3 class=selectsmall><option>AZ</option></select></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Zip/Postal Code: </strong></td><td valign=middle><input name=repeate_password5 type=text class=textinput id=repeate_password5 value=85258/></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Country: </strong></td><td valign=middle><label><select name=select2 class=selectsmall><option selected>USA</option></select></label></td></tr><tr><td valign=middle><strong><font color=ff0000>*</font>&nbsp;Phone Number: </strong></td><td valign=middle><input name=repeate_password6 type=text class=textinput id=repeate_password6/></td></tr><tr><td valign=middle><strong>&nbsp;&nbsp; Alternate Phone Number: </strong></td><td valign=middle><input name=repeate_password7 type=text class=textinput id=repeate_password7/></td></tr><tr><td valign=middle><strong>&nbsp;&nbsp; Fax Number:</strong></td><td valign=middle><input name=repeate_password8 type=text class=textinput id=repeate_password8/></td></tr><tr><td colspan=2></td></tr></table>";
ni.appendChild(newdiv);
}

function changeaddress() {
if ((document.getElementById('business').checked)){
alert("pooja");
document.getElementById('h').style.display = 'inline';
//document.getElementById(h).height.value = '25px';
document.getElementById('hh').style.display = 'inline';
//document.getElementById(hh).height.value = '25px';
document.getElementById('b').style.display = 'inline';
document.getElementById('bb').style.display = 'inline';
}
else {
document.getElementById('b').style.display = 'none';
//document.getElementById(b).height.value = '0px';
document.getElementById('bb').style.display = 'none';
//document.getElementById(bb).height.value = '0px';
document.getElementById('h').style.display = 'inline';
//document.getElementById(h).height.value = '25px';
document.getElementById('hh').style.display = 'inline';
//document.getElementById(h).height.value = '25px';

}

}
</script></head>

[poojak]

<body>
<div id="mainbody">
<table border="0" cellspacing="0" cellpadding="0" align="center" id="content">
<tr>
<td class="row1"><table width="100%" cellspacing="0" id="profile">
<tr>
<td colspan="3">
<form name="form1" method="post" action="">
<table cellpadding="0" cellspacing="0" id="createlogin">
<tr>
<td colspan="2" align="left" valign="middle">
<h6>Default Adddress </h6>
<div align="left"></div></td>
</tr>
<tr>
<td width="183" align="left" valign="middle"><strong><font color="ff0000">*</font>&nbsp;Address Type: </strong></td>
<td width="540" align="left" valign="middle">
<table width="220" cellpadding="0" cellspacing="0" id="nopadding">
<tr>
<td><strong> Home:</strong> </td>
<td width="23"> <input name="address_type" type="radio" class="checkbox" id="home" onClick="changeaddress();" value="1" checked> </td>
<td><strong>&nbsp;&nbsp;&nbsp;Business:</strong> </td>
<td width="20"><input name="address_type" id="business" type="radio" class="checkbox" onClick="changeaddress();" value="0"></td>
<td><strong>&nbsp;&nbsp;&nbsp;Other:</strong> </td>
<td width="20"><input name="address_type" id="other" type="radio" class="checkbox" onClick="changeaddress();" value="2"></td>
</tr></table>
<tr id="b" style="display:none"><td align="left" valign="middle"><strong>&nbsp;&nbsp;&nbsp;Business Title: </strong></td><td align="left" valign="middle"><input name="business_title" type="text" class="textinput" id="business_title" value="10238" /></td></tr><tr id="bb" style="display:none"><td align="left" valign="middle"><strong><font color="ff0000">*</font>&nbsp;Company Name: </strong></td><td align="left" valign="middle"><input name="company_name" type="text" class="textinput" id="company_name" /></td></tr><tr id="h" style="display:inline"><td align="left" valign="middle"><strong><font color="ff0000">*</font>&nbsp;Address Line 1: </strong></td><td align="left" valign="middle"><input name="address_1" type="text" class="textinput" id="address_1" value="10238" /></td></tr><tr id="hh" style="display:inline"><td align="left" valign="middle"><strong>&nbsp;&nbsp; Address Line 2: </strong></td><td align="left" valign="middle"><input name="address_2" type="text" class="textinput" id="address_2" /></td></tr>
<tr><td align="left" valign="middle"><strong><font color="ff0000">*</font>&nbsp;City: </strong></td>
<td align="left" valign="middle"><input name="repeate_password4" type="text" class="textinput" id="repeate_password4" value="Phoenix" /></td>
</tr>
<tr>
<td align="left" valign="middle"><strong><font color="ff0000">*</font>&nbsp;State/Province/Territory: </strong></td>
<td align="left" valign="middle"><select name="select3" class="selectsmall">
<option>AZ</option>
</select></td>
</tr>
<tr>
<td align="left" valign="middle"><strong><font color="ff0000">*</font>&nbsp;Zip/Postal Code: </strong></td>
<td align="left" valign="middle"><input name="repeate_password5" type="text" class="textinput" id="repeate_password5" value="85258" /></td>
</tr>
<tr>
<td align="left" valign="middle"><strong><font color="ff0000">*</font>&nbsp;Country: </strong></td>
<td align="left" valign="middle"><label>
<select name="select2" class="selectmonth">
<option selected>USA</option>
</select>
</label></td>
</tr>
<tr>
<td align="left" valign="middle"><strong><font color="ff0000">*</font>&nbsp;Phone Number: </strong></td>
<td align="left" valign="middle"><input name="repeate_password6" type="text" class="textinput" id="repeate_password6" /></td>
</tr>
<tr>
<td align="left" valign="middle"><strong>&nbsp;&nbsp; Fax Number:</strong></td>
<td align="left" valign="middle"><input name="repeate_password8" type="text" class="textinput" id="repeate_password8" /></td>
</tr>
<tr id="hidethis" style="display:inline;">
<td colspan="2" class="tbpadding" align="left" valign="middle"><h6>Alternate Addresses </h6></td>
</tr>
<tr>
<td colspan="2" align="left" valign="middle">
<table id="addanother" cellpadding="0" cellspacing="0"><tr><td id="adhere"></td></tr></table> </td>
</tr> <tr>
<td colspan="2" align="left" valign="middle">
<input type="hidden" value="0" id="theValue" /> <div id="myDiv"> </div> </td>
</tr>
<tr>
<td colspan="2" align="left" valign="middle"><a href="javascript:addtable();"><strong>Add an Additional Address<span> &gt;</span></strong></a><strong></strong></td>
</tr>
</table> </form></td></tr></table></td></tr> </table></td></tr></table></div></body></html>[/code]
---------------------------------------------
In default address section whicn you click on business radio button it will display to addtional rows but the same function doesn't work when I click on business radio button in Add Additional Address.
Thanks for your time.
Pooja