Clear Font selections without refreshing page

**TMXStyles** · 04-01-2012 11:53 PM

I have the below code i been trying to figure out how to reset the font changes made without having to refresh the website (f5).

Currently I have created a button that onClick uses history.go(0) which refreshes the page removing the font changes.

I would like help with figuring out a solution to reset (remove font) step1-5 without having to refresh the page.

Thanks.

Preview of Code

HTML Code:

<html>
	<head>
	<title>My Title Page</title>
	<script type="text/javascript">
	function selectTextArea()
	{
      document.FormTextArea.TextAreaBox.select();
      document.FormTextArea.TextAreaBox.focus();
    }
	function changeStepColor(id)
	{
	  document.getElementById(id).style.font="italic bold 15px arial,serif";
	}
	function inputPrompt(String , msg) 
	{
		String=prompt(msg, "");
		if (String!=null && String!="")
			{
				document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' ' + String + '\r' +
				'----------------------------------' + '\r'
			}
		else
			{
				document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' N/A' + '\r' +
				'----------------------------------' + '\r'
			}
    }
	</script>
	</head>
	<body>
	<table border="1" cellpadding="2" cellspacing="2" width="100%">
		<tr>
			<td width="50%" align="center" valign="top">
				<form name="FormTextArea">
					<textarea name="TextAreaBox" cols="40" rows="12" wrap="virtual"></textarea>
				</form>
			</td>
			<td width="50%" valign="top">
				<font size="2" id="step1">1. Step One</font>
				<input type="button" value="Input" onclick="inputPrompt('a', 'Step 1:'); changeStepColor('step1');" /><br />
				<font size="2" id="step2">2. Step Two</font>
				<input type="button" value="Input" onclick="inputPrompt('a', 'Step 2:'); changeStepColor('step2');" /><br />
				<font size="2" id="step3">3. Step Three</font>
				<input type="button" value="Input" onclick="inputPrompt('a', 'Step 3:'); changeStepColor('step3');" /><br />
				<font size="2" id="step4">4. Step Four</font>
				<input type="button" value="Input" onclick="inputPrompt('a', 'Step 4:'); changeStepColor('step4');" /><br />
				<font size="2" id="step5">5. Step Five</font>
				<input type="button" value="Input" onclick="inputPrompt('a', 'Step 5:'); changeStepColor('step5');" />
			</td>
		</tr>
		<tr>
			<td width="50%" align="center" valign="top">
				<input type="button" value="Select Text Area" onClick="selectTextArea()" />
				<input type="button" value="Clear Text Area" onClick="document.FormTextArea.TextAreaBox.value=''; history.go(0)" />
			</td>
			<td width="50%" align="center" valign="top"> 
				&nbsp
			</td>
		</tr>
	</table>
	</body>
</html>

**nap0leon** · 04-02-2012 12:07 PM

Don't use inline styles.
Instead, use a CSS class for the default and make your change function change the class of the class of the input.

If you change the class from "default" to "clicked", your reset button could then simply set each of the items class back to "default"

or...

If you change the class from "input" to "input clicked", your reset button could remove the "clicked" class.

etc.

**TMXStyles** · 04-02-2012 11:52 PM

Thank you for your reply nap0leon, but I'm not familiar with all the HTML terminology, could you provide me a sample if possible. Thank you.

Thread: Clear Font selections without refreshing page

Thread Tools

Display

Clear Font selections without refreshing page

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions