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

Sorry maybe I wasn't really clear in my post. I have now put the info online, so it might be easier.
ON this page http://antobbo.webspace.virginmedia.com/webediting/testing/tables.htm
the second box has two buttons at the bottom, "show borders" and "reset text". Now what I would like to achieve here is to have the first button, when pressed, to change what's in the box and replace it with something else, in this case a jpg. This button works fine, I managed to write the javascript for it. But the second one, I am a bit lost. I would like it, when pressed, to bring back what was on the box before clicking on the "show borders" button, but I am having many problems trying to achieve that, and I was wondering if anybody can give me a hint/suggestion
thanks

Why don't you toggle both layout.
Here is code for that.

<script language="javascript">
function changeText()
{
	document.getElementById('layout1').style.display = 'none';
	document.getElementById('layout2').style.display = 'block';
}
function resetText()
{
	document.getElementById('layout2').style.display = 'none';
	document.getElementById('layout1').style.display = 'block';
}
</script>
<div id="to_change_into_image" class="box">
<div id="layout1">
<h1>Table for layout</h1>
<table class="table_for_layout"><!--OUTER TABLE-->
<tbody><tr>
<td></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-->

<tbody><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>
</tbody></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>

</tr></tbody></table>
</div>
<div id="layout2" style="display:none;">
<img src="table_for_layout_2.jpg">
</div>
</div>

Hi vibhadevit,
thanks for that. I actually solved the issue this way http://www.antobbo.webspace.virginmedia.com/webediting/tables.htm
but I must admin that your solution is far more elegant than mine.

The answer to your question

Why don't you toggle both layout.

is, well, because I am still at the very beginning, and I really don't know much about Javascript and indeed about HTML and CSS. I really don't quite know what I can and cannot do yet, and, more importantly how to implement it, which is why my code might be a bit clunky at times. :(

Now, back to your code, let me try to understand this properly.
You' ve basically created an extra div and called it layout1 (can I ask why did you create another one and not used the "to_change_into_image"), which is visible,. Then another div called layout2 which you hid using

style="display:none;">, correct?

. Then the changeText() function hides the layout1 with

.style.display = 'none';

and show instead layout2 with

.style.display = 'block';

. The other way round in the second function.
thanks for your help :)

Okay.. as a beginner always try to explore as many way as you can for any development.And use the best one.So if you stuck anywhere you have another choice. e.g. form submission can be done more than one way.

I have seen your solution.Its 100% right but here's a just suggestion.

Lets say if you have changed your html code in field id :'to_change_into_image'.
In your way you have to change it twice. once in html and once in javascript.
You also have to take care of back slash '\'.(I hate concatenation of strings in javascript as it breaks sometime :) ) And if a little quote or slash is missing whole JS will not work.So i prefer not to use it.

I know those backslashes are a nightmare, I didn't know that for the code to validate you have to end each html tag like that

<\/...>

otherwise the code doesn't validate....anyway, was my interpretation of your code correct?

Yup.. you are absolutely correct.

I am not sure if you are aware of jquery.
with the help of jquey java script code is so much simplified.

e.g.lets you want to show or hide a div id 'myDivd'.
In jquery it is a simple one line coding.

$('#myDivd').show();
$('#myDivd').hide();

Here is a link:
http://api.jquery.com/show/

There are plenty of functionality available in jquery.
This is just a knowledge sharing as you are newbie.

yes I am aware of it , and you're the second person that is suggesting me to use it :). My argument against that though, is that, presumably, to use jquery I need to know javascript first, and quite well, or not?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.