View Full Version : HTML Buttons Help

Dec 10th, 2006, 08:53 PM
I used to have the code to do this, but I don't have it on my computer.

Here's what I'm trying to do. I want a few buttons on top, and depending on which button the user clicks, it will display text in a text area. It has to be a textarea because there will be html code that will be displayed. If anyone knows how to do this, please i.m. me on yahoo at hottieinyourdreams420 or just respond. Thank you and all help is appreciated!

Dec 10th, 2006, 11:18 PM
Uhm... for displaying (HTML) code there is the <code></code> element which you can put into a <pre></pre> element to show it as preformatted text (white spaces and line breaks will be honored). You'll have to encode the special HTML characters (like '<' and '>') or use some kind of script to change them automatically.

&lt;p&gt;This is a paragraph with
a line break and some white spaces.&lt;/p&gt;

will display:

<p>This is a paragraph with
a line break and some white spaces.</p>

As to the buttons: I assume you want links to click on and then show some code? Then something like this might be what you want?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Site Name</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<li><a href="page1.htm">Page 1</a></li>
<li><a href="page2.htm">Page 2</a></li>
<li><a href="page3.htm">Page 3</a></li>
[put code to display here]

You would copy that code, a page for each code you wanna display (of course adding links if necessary) and put the different code where I indicated. And you would style this with CSS (http://htmldog.com/) if you wanna change the look of the page(s).
I hope that comes close to what you're thinking of?

Dec 10th, 2006, 11:58 PM
This probably should be in the JavaScript forum...Anyways:

I would use the Document Object Model (http://en.wikipedia.org/wiki/Document_Object_Model). Example:


function changeText()
var newText = document.createTextNode('This is the new text.');
var container = document.getElementById('textArea');
container.replaceChild(newText, container.firstChild);


<textarea id="textArea">
This is the old text.
<button onclick="changeText()">Click Me!</button>