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 "changeaddr ess" 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="javas cript">
function addtable(){
document.getEle mentById('hidet his').style.dis play = 'none';
var ni = document.getEle mentById('myDiv ');
var numi = document.getEle mentById('theVa lue');
var num = (document.getEl ementById("theV alue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"D iv";
var newdiv = document.create Element('div');
newdiv.setAttri bute("id",divId Name);
newdiv.innerHTM L = "<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;Addr ess Type: </strong></td><td valign=middle>< table width=220 cellpadding=0 cellspacing=0 id=nopadding><t r><td><strong> Home:</strong> </td><td width=23><input name=address_ty pe id=home type=radio class=checkbox value=1 checked onClick='change address()' /></td><td><strong> &nbsp;&nbsp;&nb sp;Business:</strong> </td><td width=20><input name=address_ty pe id=business type=radio class=checkbox onClick='change address()' /></td><td><strong> &nbsp;&nbsp;&nb sp;Other:</strong> </td><td width=20><input name=address_ty pe id=other type=radio class=checkbox onClick='change address()' /></td></tr></table><tr id='h' style=display:i nline><td valign=middle>< strong><font color=ff0000>*</font>&nbsp;Addr ess Line1: </strong></td><td valign=middle>< input name=repeate_pa ssword2 type=text class=textinput id=repeate_pass word2 value=10238 /></td></tr><tr id='hh' style=display:i nline><td valign=middle>< strong>&nbsp;&n bsp; Address Line2: </strong></td><td valign=middle>< input name=repeate_pa ssword3 type=text class=textinput id=repeate_pass word3 /></td></tr><tr id='b' style=display:n one><td valign=middle>< strong>&nbsp;&n bsp;&nbsp;Busin ess Title: </strong></td><td valign=middle>< input name=repeate_pa ssword2 type=text class=textinput id=repeate_pass word2 value=10238/></td></tr><tr id='bb' style=display:n one><td valign=middle>< strong><font color=ff0000>*</font>&nbsp;Comp any Name: </strong></td><td valign=middle>< input name=repeate_pa ssword3 type=text class=textinput id=repeate_pass word3 /></td></tr><tr><td valign=middle>< strong><font color=ff0000>*</font>&nbsp;City :</strong></td><td valign=middle>< input name=repeate_pa ssword4 type=text class=textinput id=repeate_pass word4 value=Phoenix /></td></tr><tr><td valign=middle>< strong><font color=ff0000>*</font>&nbsp;Stat e/Province/Territory: </strong></td><td valign=middle>< select name=select3 class=selectsma ll><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_pa ssword5 type=text class=textinput id=repeate_pass word5 value=85258/></td></tr><tr><td valign=middle>< strong><font color=ff0000>*</font>&nbsp;Coun try: </strong></td><td valign=middle>< label><select name=select2 class=selectsma ll><option selected>USA</option></select></label></td></tr><tr><td valign=middle>< strong><font color=ff0000>*</font>&nbsp;Phon e Number: </strong></td><td valign=middle>< input name=repeate_pa ssword6 type=text class=textinput id=repeate_pass word6/></td></tr><tr><td valign=middle>< strong>&nbsp;&n bsp; Alternate Phone Number: </strong></td><td valign=middle>< input name=repeate_pa ssword7 type=text class=textinput id=repeate_pass word7/></td></tr><tr><td valign=middle>< strong>&nbsp;&n bsp; Fax Number:</strong></td><td valign=middle>< input name=repeate_pa ssword8 type=text class=textinput id=repeate_pass word8/></td></tr><tr><td colspan=2></td></tr></table>";
ni.appendChild( newdiv);
}

function changeaddress() {
if ((document.getE lementById('bus iness').checked )){
alert("pooja");
document.getEle mentById('h').s tyle.display = 'inline';
//document.getEle mentById(h).hei ght.value = '25px';
document.getEle mentById('hh'). style.display = 'inline';
//document.getEle mentById(hh).he ight.value = '25px';
document.getEle mentById('b').s tyle.display = 'inline';
document.getEle mentById('bb'). style.display = 'inline';
}
else {
document.getEle mentById('b').s tyle.display = 'none';
//document.getEle mentById(b).hei ght.value = '0px';
document.getEle mentById('bb'). style.display = 'none';
//document.getEle mentById(bb).he ight.value = '0px';
document.getEle mentById('h').s tyle.display = 'inline';
//document.getEle mentById(h).hei ght.value = '25px';
document.getEle mentById('hh'). style.display = 'inline';
//document.getEle mentById(h).hei ght.value = '25px';

}

}
</script></head>

[poojak]

<body>
<div id="mainbody">
<table border="0" cellspacing="0" cellpadding="0" align="center" id="content">
<tr>
<td class="row1"><t able 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><fon t color="ff0000"> *</font>&nbsp;Addr ess 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_t ype" type="radio" class="checkbox " id="home" onClick="change address();" value="1" checked> </td>
<td><strong>&nb sp;&nbsp;&nbsp; Business:</strong> </td>
<td width="20"><inp ut name="address_t ype" id="business" type="radio" class="checkbox " onClick="change address();" value="0"></td>
<td><strong>&nb sp;&nbsp;&nbsp; Other:</strong> </td>
<td width="20"><inp ut name="address_t ype" id="other" type="radio" class="checkbox " onClick="change address();" value="2"></td>
</tr></table>
<tr id="b" style="display: none"><td align="left" valign="middle" ><strong>&nbsp; &nbsp;&nbsp;Bus iness Title: </strong></td><td align="left" valign="middle" ><input name="business_ title" type="text" class="textinpu t" id="business_ti tle" value="10238" /></td></tr><tr id="bb" style="display: none"><td align="left" valign="middle" ><strong><fon t color="ff0000"> *</font>&nbsp;Comp any Name: </strong></td><td align="left" valign="middle" ><input name="company_n ame" type="text" class="textinpu t" id="company_nam e" /></td></tr><tr id="h" style="display: inline"><td align="left" valign="middle" ><strong><fon t color="ff0000"> *</font>&nbsp;Addr ess Line 1: </strong></td><td align="left" valign="middle" ><input name="address_1 " type="text" class="textinpu t" 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="textinpu t" id="address_2" /></td></tr>
<tr><td align="left" valign="middle" ><strong><fon t color="ff0000"> *</font>&nbsp;City : </strong></td>
<td align="left" valign="middle" ><input name="repeate_p assword4" type="text" class="textinpu t" id="repeate_pas sword4" value="Phoenix" /></td>
</tr>
<tr>
<td align="left" valign="middle" ><strong><fon t color="ff0000"> *</font>&nbsp;Stat e/Province/Territory: </strong></td>
<td align="left" valign="middle" ><select name="select3" class="selectsm all">
<option>AZ</option>
</select></td>
</tr>
<tr>
<td align="left" valign="middle" ><strong><fon t color="ff0000"> *</font>&nbsp;Zip/Postal Code: </strong></td>
<td align="left" valign="middle" ><input name="repeate_p assword5" type="text" class="textinpu t" id="repeate_pas sword5" value="85258" /></td>
</tr>
<tr>
<td align="left" valign="middle" ><strong><fon t color="ff0000"> *</font>&nbsp;Coun try: </strong></td>
<td align="left" valign="middle" ><label>
<select name="select2" class="selectmo nth">
<option selected>USA</option>
</select>
</label></td>
</tr>
<tr>
<td align="left" valign="middle" ><strong><fon t color="ff0000"> *</font>&nbsp;Phon e Number: </strong></td>
<td align="left" valign="middle" ><input name="repeate_p assword6" type="text" class="textinpu t" id="repeate_pas sword6" /></td>
</tr>
<tr>
<td align="left" valign="middle" ><strong>&nbsp; &nbsp; Fax Number:</strong></td>
<td align="left" valign="middle" ><input name="repeate_p assword8" type="text" class="textinpu t" id="repeate_pas sword8" /></td>
</tr>
<tr id="hidethis" style="display: inline;">
<td colspan="2" class="tbpaddin g" align="left" valign="middle" ><h6>Alternat e 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="javascrip t: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