/    Sign up×
Community /Pin to ProfileBookmark

Help with innerHtml

I’m trying to show 3 options on a page with radio buttons. The first one will always be there when you load the page but the other 2 buttons will make that one vanish and the one you select appear. I can’t figure out what I’m doing wrong and after 8 hours have decided I need help. Here is my code can anyone help me??

<HTML>
<HEAD>
<title>test</title>

</HEAD>

<table cellSpacing=”0″ cellPadding=”8″ width=”100%” align=”center” border=”1″>
<tr>
<td>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>

<td class=”Normal” height=”24″ align=”Center” valign=”top”><input type=”radio” name=”Create” value=”Create” onchange=”NoOptions1()” onClick=”ShowOptions1()”></td>
<script type=”text/javascript”>

<!–
function ShowOptions1() { ShowCreate.innerHTML = ( “<TABLE cellSpacing=’9′ cellPadding=’3′ width=’400′ border=3′><TR><TD class=’normal’ vAlign=’top’ bgColor=’#ffffff’>Create a new company list of favorites with only a title and brief description.&nbsp; You can create separate lists for various reasons:<BR><BR> Standards management<BR> Recommended selections<BR> Department approved purchases</TD></TR><TR><TD bgColor=’#ffffff’ vAlign=’top’><TABLE cellSpacing=’0′ cellPadding=’3′ width=’100%’ border=’0′><TR><TD></TD></TR><TR><TD class=’normalbold’>List Title</TD></TR><TR><TD><input name=’createlist:txtListTitle’ type=’text’ id=’createlist_txtListTitle’ class=’normal’ style=’width:220px;’ /></TD></TR><tr><td height=’10’></td></tr><TR><TD class=’normalbold’>Description (Optional)</TD></TR><TR><TD><textarea name=’createlist:txtListDescription’ rows=’5′ id=’createlist_txtListDescription’ class=’normal’ style=’width:220px;’></textarea></TD></TR><tr><td></td></tr><TR><TD class=’normalbold’><span class=’normalbold’><input id=’createlist_chkFilterBy’ type=’checkbox’ name=’createlist:chkFilterBy’ checked=’checked’ /><label for=’createlist_chkFilterBy’>Enable Filter By Option</label></span></TD></TR><TR><TD align=’center’><input type=’image’ name=’createlist:btnSaveList’ id=’createlist_btnSaveList’ onclick=’CheckCount();’ src=’/images/MRG/en-us/b_SaveList.gif’ alt=” border=’0′ /></TD></TR><tr><td><div id=’divCount’ style=’DISPLAY: none’></div></td></tr><tr><td><input name=’createlist:hidDescCount’ id=’createlist_hidDescCount’ type=’hidden’ style=’WIDTH: 0px; HEIGHT: 0px’ /></td></tr></TABLE></TD></TR></TABLE>” ); }
function NoOptions1() { ShowCreate.innerHTML = ( “&nbsp;” ); }
//–>
</script>
<tr><td valign=”bottom” height=”41″ id=”ShowCreate”>&nbsp;</td>
</tr>
</table></td>
<td>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td class=”Normal” height=”24″ align=”Center” valign=”top”><input type=”radio” name=”Create” value=”Add” onchange=”NoOptions2()” onClick=”ShowOptions2()”></td>
<script type=”text/javascript”>
<!–
function ShowOptions2() { ShowAdd.innerHTML = ( “<TABLE cellSpacing=’0′ cellPadding=’3′ width=’400′ border=’0′><TR><TD class=’normalbold’><a id=’lnkPersonalFavorites’ title=’Click here to go to your Personal Favorites page’ class=’normalbold’ href=’importpersonal.aspx’>Personal Favorites</a></TD></TR><TR><TD class=’normal’>Add from my personal favorites list.<br><br></TD></TR><tr id=’trFrequentPurchase’><TD class=’normalbold’><a id=’lnkFrequentPurchase’ title=’Click here to view your company’s most frequent purchases’ class=’normalbold’ href=’importfrequent.aspx’>Frequent Purchase</a></TD></tr><tr id=’trFrequentPurchaseText’><TD class=’normal’>Add from a list of my company’s most frequent purchases (the top 50 items purchased in the last 6 months)<br><br></TD></tr><TR><TD><a id=’lnkEnhancedSearch’ title=’Click here to go to Enhanced Search’ class=’normalbold’ href=’../../search/searchcriteria.aspx’>Enhanced Search</a></TD></TR><TR><TD class=’normal’>Search by individual part by using Enhanced Search</TD></TR></TABLE>” ); }
function NoOptions2() { ShowAdd.innerHTML = ( “&nbsp;” ); }
//–>
</script>
<tr>
<td valign=”bottom” height=”41″ id=”ShowAdd”>&nbsp;</td>
</tr>
</table>
<td>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td class=”Normal” height=”24″ align=”Center” valign=”top”><input type=”radio” name=”Create” value=”Edit” onchange=”NoOptions3()” onClick=”ShowOptions3()”></td>
<script type=”text/javascript”>
<!–
function ShowOptions3() { ShowEdit.innerHTML = ( “<TABLE cellSpacing=’9′ cellPadding=’3′ width=’400′ border=’1′><TR><TD class=’normalbold’ id=’tdViewList’ name=’tdViewList’>View/Edit List</TD></TR><tr><TD class=’normal’ vAlign=’top’>View and make changes to an existing list<P class=’normal’> Delete selected parts from a list<BR> Update the Title and Description of a list<BR><IMG height=’10’ src=’/SSIShop/images/MRG/bluearrow.gif’ width=’10’ border=’0′> &nbsp;Delete an entire list<P class=’normal’>This is also a printable page for reporting purposes</P></TD></tr></tsble>” ); }
function NoOptions3() { ShowEdit.innerHTML = ( “&nbsp;” ); }
//–>
</script>
<tr>
<td valign=”bottom” height=”41″ id=”ShowEdit”>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@phpnoviceMar 15.2006 — Grief, throw a whole page of source at us and expect us to figure it out for you? The very least you could have done is to just post the two radio buttons and the two DIVs that are supposed to appear and disappear. Care to clear the way there, [B]Classerv[/B]?
Copy linkTweet thisAlerts:
@ClasservauthorMar 15.2006 — Here's the 2 small tables . I really have 3 buttons that need to show 3 different tables with forms when you click the corresponding button but can't have all 3 show up on the page at one time. Does that make sense? All the page will really show is the 3 buttons until you select one. I figure if I can get 2 to work then 3 will be a snap.

<table id=table1 border="0" cellpadding="0" cellspacing="0" width="60">

<tr>

<td class="Normal" height="24" align="Center" valign="top" style="width:60px;"><input type="radio" name="Create" value="Create" onClick="ShowOptions1()"></td>

<script type="text/javascript">

<!--

function ShowOptions1() { ShowCreate.innerHTML = ( "<table width='60px'><tr><td align='center' class='AddCart'>Item</td></tr></table>" ); }

//-->

</script>

<tr><td valign="bottom" height="41" id="ShowCreate">&nbsp;</td>

</tr>

</table>

<table id=table2 border="0" cellpadding="0" cellspacing="0" width="60">

<tr>

<td class="Normal" height="24" align="Center" valign="top" style="width:60px;"><input type="radio" name="Create" value="Add" onClick="ShowOptions2()"></td>

<script type="text/javascript">

<!--

function ShowOptions2() { ShowAdd.innerHTML = ( "<table width='60px'><tr><td align='center' class='AddCart'>Added </td></tr></table>" ); }

//-->

</script>

<tr>

<td valign="bottom" height="41" id="ShowAdd">&nbsp;</td>

</tr>

</table>
Copy linkTweet thisAlerts:
@phpnoviceMar 15.2006 — You shouldn't be inserting that much HTML dynamically. Instead, go ahead and code the HTML normally. Then, via ID attributes, you can turn the display of the elements on and off at will.
Copy linkTweet thisAlerts:
@ClasservauthorMar 15.2006 — I hate to admit but I don't know how to do that....I'm so frustrated with it I'm about to cry....
Copy linkTweet thisAlerts:
@phpnoviceMar 15.2006 — This works in all modern browsers:

To hide/show an HTML element:

document.getElementById("elementID").style.display = "none";

document.getElementById("elementID").style.display = "block";
Copy linkTweet thisAlerts:
@JKwingsfanMar 15.2006 — yah, its pretty easy. Thats what people use for dropdowns and expandable navigation trees. I have a page that has like an 800 line navigation tree, lol.
×

Success!

Help @Classerv spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...