www.webdeveloper.com
Results 1 to 3 of 3

Thread: Clear Font selections without refreshing page

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    Clear Font selections without refreshing page

    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>

  2. #2
    Join Date
    Nov 2007
    Posts
    413
    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.

  3. #3
    Join Date
    Apr 2012
    Posts
    2
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles