Is it possible to have rewrite html formatted text from a button click in javascript?

**lallous** · Jul 23 '05, 09:00 PM

Re: Is it possible to have rewrite html formatted text from a button click in javascript?

Hello

You might want to play with innerHTML.

<html>
<head>
<title> New Document </title>
<meta name="Generator " content="EditPl us">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Descripti on" content="">
</head>
<script language="JavaS cript">

</script>
<body>
<hr>
<span id="hey">Hello World!</span>
<hr>
<form>
Enter text: <input type="text" name="thetext" value="The text"><br>
<input type="button" value="change!"
onclick="change Me(generateCool Julie(1,5,1, this.form.thete xt.value));">
</form>
</body>
</html>

<frogman042@yah oo.com> wrote in message
news:1119751439 .287939.84060@g 44g2000cwa.goog legroups.com...[color=blue]
> My daughter is playing around trying to learn JavaScript and she wrote
> a small program that prints out a message in increasing and decreasing
> font size and color changes. She is using document write and it works
> fine until she puts it into a function and then calls the function from
> a button with onClick. This also seems to work OK, with the exception
> that the page is cleared, and the curser changes (and stays) as an
> hourglass.
>
> In reading some threads it seems that after the page is loaded,
> subsequent calls to document.write cause the page to clear, so only
> output is written and the button is lost.
>
> In essence is there a way to do the following:
>
> Have a input text filed and a button. Clicking the button writes out
> formatted html below it. Clicking it again rewrites it out with new
> values depending on the value in the input text.
>
> Any ideas on how to do this easily would be appreciated.
>
> Thanks in advance.
>
> ---Jay
>
> Here is the code she wrote:
>
> <html>
>
>
> <script type="text/javascript">
>
> function coolJulie (firstval, big, small){
>
> var i = firstval
> while (i < big) {
> document.write( "<center><f ont size= "+ i +" color=" + i * i * i * i *
> 109684 + ">You Just Typed in: " + document.myForm .hi.value +
> "</center></font><BR>");
> i = i + 1
> }
> while (i > small) {
> document.write( "<center><f ont align=center size= "+ i +" color=" + i
> * i * i * i * 109684 + ">You Just Typed in: " +
> document.myForm .hi.value + "</center></font><BR>");
> i = i - 1
> }
> }
>
> </script>
>
> <body>
> <form name='myForm'>
> <br><br>
> <center>
> <b>
> <font size=3 color='red'>Hi I'm so cooler then some people, maybe even
> you!</font>
> <br>
> <input type=text name='hi' value='yoohoo'>
> <input type=button name="ClickMe" value= 'Click Here if you're done
> typing' onClick='coolJu lie(1,5,1);'>
>
> </form>
> </body>
> </html>
>[/color]

**frogman042@yahoo.com** · Jul 23 '05, 09:00 PM

Re: Is it possible to have rewrite html formatted text from a button click in javascript?

Thanks lallous,

After fixing some line break problems from the newreader, it worked
like a charm and it will be something I can easily explain.

---Jay

**RobG** · Jul 23 '05, 09:00 PM

Re: Is it possible to have rewrite html formatted text from a buttonclick in javascript?

frogman042@yaho o.com wrote:[color=blue]
> My daughter is playing around trying to learn JavaScript and she wrote
> a small program that prints out a message in increasing and decreasing
> font size and color changes. She is using document write and it works
> fine until she puts it into a function and then calls the function from
> a button with onClick. This also seems to work OK, with the exception
> that the page is cleared, and the curser changes (and stays) as an
> hourglass.
>
> In reading some threads it seems that after the page is loaded,
> subsequent calls to document.write cause the page to clear, so only
> output is written and the button is lost.
>
> In essence is there a way to do the following:
>
> Have a input text filed and a button. Clicking the button writes out
> formatted html below it. Clicking it again rewrites it out with new
> values depending on the value in the input text.
>
> Any ideas on how to do this easily would be appreciated.
>
> Thanks in advance.
>
> ---Jay
>
> Here is the code she wrote:[/color]

If she is going to learn, she may as well get it right from the start.
One of the most important things to get right is validating the HTML
source code - there is a free validator at w3.org:

<URL:http://validator.w3.or g/>

The page that was posted will cause a series of errors, but once you
fix them you'll know that your page is now a much, much better piece of
work.
[color=blue]
>
> <html>[/color]

You should always include a doctype. Browsers may display your page
differently depending on the doctype specified. Without one, you are
trusting to luck. Since HTML 4.01 has been around for 5 years now, it
seems reasonable to use that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

[color=blue]
>
>
> <script type="text/javascript">[/color]

<head> tags aren't mandatory, but it's always handy to have them.
Browsers will insert a head element where they think it's appropriate,
but why leave it to luck that they'll be in the right place? A
<title> element is required, it's generally good to put them in right
below the opening HTML tag:

<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
[color=blue]
>
> function coolJulie (firstval, big, small){
> var i = firstval
> while (i < big) {
> document.write( "<center><f ont size= "+ i +" color=" + i * i * i * i *[/color]

When you write into the document, you should use good quality HTML.
'font' is depreciated, so use 'style' instead.

The intention seems to be to increase the size of the font by some
increment. Rather than the old font sizes, percentages can be used
based on steps of say 5%, so font-size can be increased:

font-size = 100 + ( i*5) + '%';

Similarly for the colour, which is specified with three values, one
each for red, green and blue (rgb) in a range from 0 to 255. The usual
way is to use hexidecimal values (#a3f523 or such) but to save a lot of
work, we can use rgb(x, y, z) instead, e.g. rgb(255,0,0) will be red.

Here is some code that creates some random colours for the text:

var red = Math.floor(Math .random()*256);
var green = Math.floor(Math .random()*256);
var blue = Math.floor(Math .random()*256);
[color=blue]
> 109684 + ">You Just Typed in: " + document.myForm .hi.value +
> "</center></font><BR>");[/color]

So now the script so far looks like:

function coolJulie (firstval, big, small){
var i = firstval
while ( i < big ) {
var fontsize = 100 + ( i*5) + '%';
var red = Math.floor(Math .random()*256);
var green = Math.floor(Math .random()*256);
var blue = Math.floor(Math .random()*256);
document.write( '<p style="',
'font-size: ' + fontsize + ';',
'color: ' + 'rgb(' + red +',' + green +',' + blue + ');',
'text-align: center;',
'">',
'You Just Typed in: ' + txt,
'</p>');
[color=blue]
> i = i + 1[/color]

This can be written:

i++;
[color=blue]
> }
> while (i > small) {[/color]

This one can be the reverse of the above:

while ( i > small ) {
var fontsize = 100 + ( i*5) + '%';
var red = Math.floor(Math .random()*256);
var green = Math.floor(Math .random()*256);
var blue = Math.floor(Math .random()*256);
document.write( '<p style="',
'font-size: ' + fontsize + ';',
'color: ' + 'rgb(' + red +',' + green +',' + blue + ');',
'text-align: center;',
'">',
'You Just Typed in: ' + txt,
'</p>');
i--;
}

[...][color=blue]
>
> <body>
> <form name='myForm'>
> <br><br>
> <center>
> <b>
> <font size=3 color='red'>Hi I'm so cooler then some people, maybe even
> you!</font>
> <br>
> <input type=text name='hi' value='yoohoo'>
> <input type=button name="ClickMe" value= 'Click Here if you're done
> typing' onClick='coolJu lie(1,5,1);'>[/color]

When putting quotes inside other quotes, you need to be careful. You
can put single quotes inside doubles, or doubles inside singles, but
beyond that it gets more complicated:

<input type=button name="ClickMe" value="Click Here if you're done
typing" onClick="coolJu lie(1,5,1);">

I like to use doubles in HTML and single in JavaScript, but it's up to
you.
[color=blue]
>
> </form>
> </body>
> </html>
>[/color]

Since you don't want to delete your document content all the time, you
could use innerHTML to write to the page, but using the document object
model is easier, you write to the elements rather than changing the
underlying HTML source. It's also better to split out some of the
logic into separate functions. Here's a solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Coloured text </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">

<script type="text/javascript">

// This writes the paragraph to the page in random colours:
function writePara( fsize, txt, tgt ) {
var oPara = document.create Element('P'); // Create a P element
var red = Math.floor(Math .random()*256); // random red value
var green = Math.floor(Math .random()*256); // random green value
var blue = Math.floor(Math .random()*256); // random blue value
oPara.style.col or = 'rgb(' + red +',' + green + ',' + blue + ')';
oPara.style.tex tAlign = 'center'; // center-align the P
oPara.style.fon tSize = fsize; // set the size of the text
var oTxt = document.create TextNode(txt); // add the text
oPara.appendChi ld(oTxt); // add the text to the P
tgt.appendChild (oPara); // add the P to the document
}

// This removes the content of an element:
function deleteChildren( tgt ){
while ( tgt.firstChild ) {
tgt.removeChild (tgt.firstChild );
}
}

// This decides what to write where:
function coolJulie(first val, big, small){
var i = firstval;
var txt = document.myForm .hi.value;
var tgt = document.getEle mentById('julie Div');
deleteChildren( tgt);
while ( i < big ) {
var fontsize = 100 + ( i*10) + '%';
writePara( fontsize, txt, tgt);
i++;
}
while ( i >= small ) {
var fontsize = 100 + ( i*30) + '%';
writePara( fontsize, txt, tgt);
i--;
}
}
</script>
<body>
<form name="myForm" action="">
<div style="text-align: center; color: red; font-weight: bold;
background-color: white;
">Hi I'm so cooler then some people, maybe even you<br>
<input type="text" name="hi" value="yoohoo">
<input type="button" name="ClickMe"
value="Click here when you're finished typing"
onclick="coolJu lie(1,5,1);">
</div>
</form>
<div id="julieDiv"> </div>

</body>
</html>

--
Rob

**Dr John Stockton** · Jul 23 '05, 09:01 PM

Re: Is it possible to have rewrite html formatted text from a button click in javascript?

JRS: In article <1119751439.287 939.84060@g44g2 000cwa.googlegr oups.com>,
dated Sat, 25 Jun 2005 19:03:59, seen in news:comp.lang. javascript,
frogman042@yaho o.com posted :[color=blue]
>
>In essence is there a way to do the following:
>
>Have a input text filed and a button. Clicking the button writes out
>formatted html below it. Clicking it again rewrites it out with new
>values depending on the value in the input text.
>
>Any ideas on how to do this easily would be appreciated.[/color]

Take a copy of <URL:http://www.merlyn.demo n.co.uk/js-quick.htm>.

Insert Div.innerHTML = "A<big>B<big>C< big>D</big>E</big>F</big>G"
in the textarea F.Code; press the "Eval" button.

Then simplify so that eval is not used and the button directly executes
Div.innerHTML = F.Code.value

Then remove all else that you do not need, and read FAQ 4.49 & notes.

Alternatively, see FAQ 4.15.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Is it possible to have rewrite html formatted text from a button click in javascript?

Is it possible to have rewrite html formatted text from a button click in javascript?

Comment

Comment

Comment

Comment