Hi peeps,
I am having some difficulty creating a reset button that resets some text to the original status.
Basically I have a div box in a page which shows what it means to use a table for layout in a page - I am doing a web editing site showing good and bad practice.
As default the box displays a table layout (without borders) and at the bottom I wanted to have two buttons: the first "show borders" which basically changes the text in the box to reveal the borders of the tables, and another "reset" that goes back to the default status. The first button works fine, when you click on it, it loads an image in the box showing how the layout would look like if the table had borders, but I am not sure how to reset it to the original status. Here is the code in the <body> :
...
<p>
<br>Let's now look at a table used for layout:<br><br>
</p>
<div class="box" id="to_change_into_image">
<h1>Table for layout</h1>
<table class="table_for_layout"><!--OUTER TABLE-->
<tr>
<td><td colspan="2"><p><br></p><h2>Web editing - Tables</h2></td>
</tr>
<tr><td>
<table class="inner_table"><!--INNER TABLE SITS IN THE COLUMN OF THE OUTER TABLE-->
<tr>
<td><a href="styles.htm">Styles</a></td>
</tr>
<tr>
<td><a href="documents.htm">Documents</a></td>
</tr>
<tr>
<td><a href="content.htm">Content</a></td>
</tr>
<tr>
<td><a href="links.htm">Links</a></td>
</tr>
<tr>
<td><a href="Images">Images</a></td>
</tr>
<tr>
<td>Pages</td>
</tr>
<tr>
<td><strong>Tables</strong></td>
</tr>
</table><!--INNER TABLE--></td>
<!--SECOND COLUMN OF INNER TABLE TAKES THE TEXT -->
<td colspan="2"><h3>Tables in the page</h3>
<p>Nowadays tables are used only for tabular data and not for layout purposes. To arrage text and elements in a page we use a CSS like this - that's the CSS for this website.</p></td>
</table> <!--OUTER TABLE-->
</div> <!-- END BOX-->
<input type='button' onclick='changeText()' value='Show borders'><!--this is fine-->
<input type='button' onclick='resetText()' value='Reset text'><!--this is the offending script -->the first script in the <head> , the one for the "show borders" button goes:
<script type="text/javascript">
<!--
function changeText()
{
var htmlTable = document.getElementById('to_change_into_image').innerHTML='<img src="table_for_layout_2.jpg">';
}
//-->
</script>Now, the second one I am not sure what to do. I obviously tried but no joy.
My first attempt was to give an ID - assume it is 'image'- to the image (which though is not in the page in question) and then do pretty much the same thing I have done with the previous script:
in the body of the page:
...
<input type='button' onclick='resetText()' value='Reset text'><--!this is the offending script -->...and the the <head>
...
function resetText()
{
var backToNoBorder = document.getElementById('image').innerHTML='to_change_into_image';
}but obviously it can't work because the image I assigned the ID to, is not in that page and also the element with the to_change_into_image id at the moment is, I suppose, the image and not the code with the borderless table.
I also used the reset() function, but I am not sure if I have done it correctly: I used the same as above function in the body of the page and in the <head> I went:
function resetText()
{
reset('to_change_into_image');
}but it doesn't sound right...
I hope I am making some sense
Sorry I haven't used Javascript that much and I am still at the very beginning...
Any suggestion?
thanks
