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

F

frogman042

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><font 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><font 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='coolJulie(1,5,1);'>

</form>
</body>
</html>
 
L

lallous

Hello

You might want to play with innerHTML.

<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script language="JavaScript">
<!--
function getElement(id)
{
if (document.getElementById)
return document.getElementById(id);
else if (document.all)
return document.all[id];
else
return document.layers[id];
}

function generateCoolJulie(firstval, big, small, thetext)
{
var i = firstval;
var s = '';
for (i=firstval;i<big;i++)
{
s = s + "<center><font size= "+ i +" color=" + (i * i * i * i *
109684) + ">You Just Typed in: "
+ thetext
+ "</center></font><BR>";
}

while (i > small)
{
s = s + "<center><font align=center size= " + i +" color="
+ (i * i * i * i * 109684) + ">You Just Typed in: "
+ thetext
+ "</center></font><BR>";
i = i - 1
}

return s;
}

function changeMe(newText)
{
var o = getElement('hey');
o.innerHTML = newText;
}

//easeb

//-->
</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="changeMe(generateCoolJulie(1,5,1, this.form.thetext.value));">
</form>
</body>
</html>
 
F

frogman042

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
 
R

RobG

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:
Click to expand...

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.org/>

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.
<html>
Click to expand...

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">

<script type="text/javascript">
Click to expand...

<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">
function coolJulie (firstval, big, small){
var i = firstval
while (i < big) {
document.write("<center><font size= "+ i +" color=" + i * i * i * i *
Click to expand...

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);
109684 + ">You Just Typed in: " + document.myForm.hi.value +
"</center></font><BR>");
Click to expand...

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,
' said:
i = i + 1
Click to expand...

This can be written:

i++;
}
while (i > small) {
Click to expand...

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--;
}

[...]
<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='coolJulie(1,5,1);'>
Click to expand...

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="coolJulie(1,5,1);">

I like to use doubles in HTML and single in JavaScript, but it's up to
you.
</form>
</body>
</html>
Click to expand...

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.createElement('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.color = 'rgb(' + red +',' + green + ',' + blue + ')';
oPara.style.textAlign = 'center'; // center-align the P
oPara.style.fontSize = fsize; // set the size of the text
var oTxt = document.createTextNode(txt); // add the text
oPara.appendChild(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(firstval, big, small){
var i = firstval;
var txt = document.myForm.hi.value;
var tgt = document.getElementById('julieDiv');
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="coolJulie(1,5,1);">
</div>
</form>
<div id="julieDiv"></div>

</body>
</html>
 
D

Dr John Stockton

JRS: In article <[email protected]>,
dated Sat, 25 Jun 2005 19:03:59, seen in (e-mail address removed) posted :
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.
Click to expand...

Take a copy of <URL:http://www.merlyn.demon.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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Centering a button using flexbox 2
Function call from button to automatic 7
<Button ...> display is fine, except for two things 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Is it possible to get some informations from a document in Google Docs and show it on my website ? 0
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

Total: 26 (members: 2, guests: 24)
Robots: 382

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top