Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Another noob question

Status
Not open for further replies.
BennySHS

BennySHS

Programmer
Mar 15, 2005
32
DE
Hi there,

first sorry for my senseless subjects, but I'm not able to explain this problem in a few words.

What I want to do:
I'm trying to code a little javasript-based html-editor.
So there is a big text-field where the User can enter his code. What I want is a preview of the html-code the User entered.
For example:
The user types in his Editor-box <b>test</b>, then I want to have another text-box (or iframe or whatever), where the user can the now a bold "test"-word.
I tried it this way:

onClick="javascript: document.getElementById('preview-box').value=document.getElementById('input-box').value"

But this way in the preview-box gets just the same text as the input-box, in my example <b>test></b> instead of the interpreted bold "test"-word.

Sorry for my strange english, I can't write that good, but I hope you can understand me anyway ^^
thx a lot,
greets ben
 
Sort by date Sort by votes

There are several ways to achieve this. This is one of the easier ones:

Code: 
document.getElementById('previewBox').innerHTML = document.getElementById('inputBox').value;

...

<div id="previewBox"></div>
<input type="text" id="inputBox" />

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
like so:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script language="javascript"><!--

function preview() {
    var src = document.forms['codeForm'].elements['code'].value;
    var pre = document.getElementById('previewDiv');
    pre.innerHTML = src;
}

--></script>

</head>

<body>

<form name="codeForm">
  <textarea name="code"></textarea>
  <input type="button" onclick="preview();" value="Preview" />
</form>

<div id="previewDiv" style="border: 1px solid black;"></div>

</body>
</html>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Thank you very much!
Exactly what I wanted, and I expected that this would me much more complicated...
A very good answer in a very short time - great ! ;)
greets,
ben
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
433
gmmastros
gmmastros
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
731
berkshirea
berkshirea
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
231
JPSeo
JPSeo
jimbospain
  • Locked
  • Question
script to read in files, parse and add to another file
Replies
1
Views
264
ggriffit
ggriffit
esmaeil
  • Locked
  • Question
Get the content of another site
Replies
1
Views
177
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top